/* Smartphones (portrait and landscape) */
@media (max-width: 576px) {
    /* Your CSS styles for smartphones go here */
    #header .logo img {
        max-height: 60px;
    }

    #header {
        height: 80px;
    }

    .header-social-links {
        display: none;
        visibility: hidden;
    }

    a.icon {
        margin:0;
        padding-top: 10px;
    }

    img.icon-img {
        height: 30px;
        width: 100%;
    }

    .hero-writing-container{
        margin-top: 60px;
    }

    .splide__arrow--prev {
        left: 10px !important;
    }
    .splide__arrow--next {
        right: 1em !important;
    }

    .navbar {
        padding: 0;
        left: -20px;
    }

    .text-banner h1 {
        font-size: 16px;
        font-weight: 700;
        line-height: 18px;
        padding: 5px 9%;
    }

    .text-banner h2 {
        font-size: 11px;
        line-height: 13px;
    }

    .section-title {
        font-size: 30px;
    }
    button.splide__arrow.splide__arrow--prev {
        width: 3em;
        height: 3em;
        left: 4px !important;
    }
    button.splide__arrow.splide__arrow--next {
        width: 3em;
        height: 3em;
        right: 4px !important;
    }

  }

  @media (min-width: 577px) and (max-width: 767px   ) {

    .text-banner h1 {
        font-size: 22px;
        font-weight: 700;
        line-height: 23px;
        padding: 5px 10%;
    }

    .text-banner h2 {
        font-size: 18px;
    line-height: 20px;
    }
    img.icon-img {
        width: 100%;
        height: 40px;
    }

    .navbar {
        padding: 0;
        left: 0px;;
    }
    button.splide__arrow.splide__arrow--prev {
        width: 3em;
        height: 3em;
        left: -40px !important;
    }
    button.splide__arrow.splide__arrow--next {
        width: 3em;
        height: 3em;
        right: -40px !important;
    }

  }



  /* Tablets and larger smartphones (portrait and landscape) */
  @media (min-width: 768px) and (max-width: 1023px) {
    /* Your CSS styles for tablets go here */

    .hero-writing-container{
        margin-top: 120px;
    }

    a.icon {
       margin-top: 20px;
       padding: 1px;
    }

    .splide__arrow--prev {
        left: 3px !important;
    }

    .navbar {
       margin-right: -35px;
    }

    .header-social-links.d-flex.align-items-center {
        margin-right: 40px;
    }

    .text-banner h1 {
        font-size: 23px;
        font-weight: 700;
        line-height: 26px;
        padding: 5px 14%;
    }

    .text-banner h2 {
        font-size: 16px;
        line-height: 18px;
    }

    img.icon-img {
        height: 44px;
    }





  }



  /* Desktops and laptops (wider screens) */
@media (min-width: 1024px) {
    /* Your CSS styles for desktops and laptops go here */



    .navbar {
        padding: 0;
        left: -10px;
    }
    .text-banner h1 {
        font-size: 30px;
        font-weight: 700;
        line-height: 30px;
        padding: 5px 15%;
    }



  }

  /* Large desktops and high-resolution displays */
  @media (min-width: 1200px) {
    /* Your CSS styles for large desktops go here */

    .text-banner h1 {
        font-size: 44px;
    font-weight: 700;
    line-height: 60px;
    padding: 5px 15%;
    }

    .text-banner h2 {
        font-size: 29px;
        line-height: 37px;
    }


  }

  @media (min-width: 1920px){


    .text-banner h1 {
        font-size: 64px;
        font-weight: 700;
        line-height: 97px;
        padding: 4px 9%;
        margin-bottom: 18px;
    }

    .text-banner h2 {
        font-size: 36px;
        line-height: 44px;
    }
  }