/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* LOGO BANNER  */
  #logo-banner-section .logo {
    margin-bottom: 1%;
    margin-right: 3%;
    padding-top: 1%;
    width: 20%;
  }
  #logo-banner-section .pastor {
    text-align: end;
    padding: 1% 0;
  }
  #logo-banner-section .pastor img {
    width: 80%;
  }



  /* SLOGAN BANNER */
  #slogan-banner-section h2 {
    font-size: 2.25rem;
    letter-spacing: 2rem;
    margin-top: 10%;
    transform: scaleY(7);
  }
  #slogan-banner-section p {
    padding: 2%;
    margin-bottom: 8%;
    margin-top: -7.7%;
    margin-left: 10%;
    width: 80%;
    opacity: .98;
  }



  /* UPCOMING */
  #upcoming p {
    font-size: 2rem;
    border-radius: 50px;
  }
  #upcoming ul {
    flex-direction: row;
  }
  #upcoming li img {
    margin-left: -6.25%;
  }



  /* HOME MENU */
  #home-menu-section {
    margin-bottom: 8%;;
  }
  #home-menu-section a {
    text-decoration: none;
  }
  #home-menu-section .about-us h3,
  #home-menu-section .new-here h3,
  #home-menu-section .youth h3,
  #home-menu-section .giving h3 {
    font-size: 3rem;
  }



  /* MENU */
  #menu-section .menu a {
    text-decoration: none;
  }
  #menu-section .menu ul {
    display: flex;
    justify-content: center;
    margin-top: 2%;
  }
  #menu-section .menu li {
    border-right: 1px solid var(--black);
    font-size: 1.25rem;
    height: 3rem;
    padding: 4% 12%;
    text-align: center;
    width: 12rem;
  }



  /* MISSION BANNER */
  #mission-banner-section h3 {
    margin-bottom: 6%;
  }



  /* WHERE SECTIONS */
  #where-have-we-been-section p,
  #where-are-we-section p,
  #where-are-we-going-section p
  {
    font-size: 4rem;
    letter-spacing: 15%;
    padding: 4rem;
    transform: scaleY(4);
  }

  #where-have-we-been-section h3,
  #where-are-we-section h3,
  #where-are-we-going-section h3
  {
    padding: 2%;
  }

  #where-have-we-been-section h4,
  #where-are-we-section h4,
  #where-are-we-going-section h4
  {
    margin-bottom: -16%;
    margin-top: -16%;
    padding: 2%;
  }

  #where-are-we-going-section {
    margin-bottom: 4%;
    position: relative;
  }



  /* NEW HERE */
  #new-here-section {
    margin-bottom: 8%;
    margin-top: 8%;
  }
  #checkin-section .row > .col > .row,
  #service-times-section .row > .col > .row,
  #map-section .row > .col > .row,
  #contact-section .row > .col > .row,
  #giving-section .row > .col > .row
  {
    margin-bottom: 8%;
    padding: 4%;
  }
  #checkin-section h3,
  #service-times-section h3,
  #map-section h3,
  #contact-section h3,
  #giving-section h3
  {
    padding: 2%;
  }
  #checkin-section button,
  #contact-section button
  {
    margin-top: 4%;
    width: 100%;
  }


  /* GIVING */
  #giving-section h3 {
    margin-top: 8%;
  }
  #giving-section .blu-bg p {
    padding: 2%;
  }
  #giving-section .blu-bg span {
    padding: 4%;
  }
  #giving-section .blu-bg {
    margin-bottom: 8%;
    margin-top: 4%;
    padding: 8%;
  }



  /* FOOTER */
  #footer-section img {
    width: 10%;
  }
}


/* ========== */



/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* LOGO BANNER  */
  #logo-banner-section h1,
  #logo-banner-section h2
  {
    padding-top: 5%;
  }
  #logo-banner-section .logo {
    margin-bottom: 1%;
    margin-right: 3%;
    padding-top: 1%;
    width: 20%;
  }
  #logo-banner-section .pastor {
    text-align: end;
    padding: 1% 0;
  }
  #logo-banner-section .pastor img {
    width: 80%;
  }



  /* SLOGAN BANNER */
  #slogan-banner-section h2 {
    font-size: 2.25rem;
    letter-spacing: 2rem;
    margin-top: 10%;
    transform: scaleY(7);
  }
  #slogan-banner-section p {
    padding: 2%;
    margin-bottom: 8%;
    margin-top: -7.7%;
    margin-left: 10%;
    width: 80%;
    opacity: .98;
  }



  /* UPCOMING */
  #upcoming p {
    font-size: 2rem;
    border-radius: 50px;
  }
  #upcoming ul {
    flex-direction: row;
  }
  #upcoming li img {
    margin-left: -6.25%;
  }



  /* HOME MENU */
  #home-menu-section {
    margin-bottom: 8%;;
  }
  #home-menu-section a {
    text-decoration: none;
  }
  #home-menu-section .about-us h3,
  #home-menu-section .new-here h3,
  #home-menu-section .youth h3,
  #home-menu-section .giving h3 {
    font-size: 3rem;
  }



  /* MENU */
  #menu-section .menu a {
    text-decoration: none;
  }
  #menu-section .menu ul {
    display: flex;
    justify-content: center;
    margin-top: 2%;
  }
  #menu-section .menu li {
    border-right: 1px solid var(--black);
    font-size: 1.25rem;
    height: 3rem;
    padding: 4% 12%;
    text-align: center;
    width: 12rem;
  }



  /* MISSION BANNER */
  #mission-banner-section h3 {
    margin-bottom: 6%;
  }



  /* WHERE SECTIONS */
  #where-have-we-been-section p,
  #where-are-we-section p,
  #where-are-we-going-section p
  {
    font-size: 4rem;
    letter-spacing: 15%;
    padding: 4rem;
    transform: scaleY(4);
  }

  #where-have-we-been-section h3,
  #where-are-we-section h3,
  #where-are-we-going-section h3
  {
    padding: 2%;
  }

  #where-have-we-been-section h4,
  #where-are-we-section h4,
  #where-are-we-going-section h4
  {
    margin-bottom: -16%;
    margin-top: -16%;
    padding: 2%;
  }

  #where-are-we-going-section {
    margin-bottom: 4%;
    position: relative;
  }



  /* NEW HERE */
  #new-here-section {
    margin-bottom: 8%;
    margin-top: 8%;
  }
  #checkin-section .row > .col > .row,
  #service-times-section .row > .col > .row,
  #map-section .row > .col > .row,
  #contact-section .row > .col > .row,
  #giving-section .row > .col > .row
  {
    margin-bottom: 8%;
    padding: 4%;
  }
  #checkin-section h3,
  #service-times-section h3,
  #map-section h3,
  #contact-section h3,
  #giving-section h3
  {
    padding: 2%;
  }
  #checkin-section button,
  #contact-section button
  {
    margin-top: 4%;
    width: 100%;
  }


  /* GIVING */
  #giving-section h3 {
    margin-top: 8%;
  }
  #giving-section .blu-bg p {
    padding: 2%;
  }
  #giving-section .blu-bg span {
    padding: 4%;
  }
  #giving-section .blu-bg {
    margin-bottom: 8%;
    margin-top: 4%;
    padding: 8%;
  }



  /* FOOTER */
  #footer-section img {
    width: 10%;
  }
}


/* ========== */



@media (min-width: 1400px) {
  /* LOGO BANNER  */
    #logo-banner-section h1,
  #logo-banner-section h2
  {
    padding-top: 5%;
  }
  #logo-banner-section .logo {
    margin-bottom: 1%;
    margin-right: 3%;
    padding-top: 1%;
    width: 20%;
  }
  #logo-banner-section .pastor {
    text-align: end;
    padding: 1% 0;
  }
  #logo-banner-section .pastor img {
    width: 80%;
  }



  /* SLOGAN BANNER */
  #slogan-banner-section h2 {
    font-size: 2.25rem;
    letter-spacing: 2rem;
    margin-top: 10%;
    transform: scaleY(7);
  }
  #slogan-banner-section p {
    padding: 2%;
    margin-bottom: 8%;
    margin-top: -6.5%;
    margin-left: 10%;
    width: 80%;
    opacity: .98;
  }



  /* UPCOMING */
  #upcoming p {
    font-size: 2rem;
    border-radius: 50px;
  }
  #upcoming ul {
    flex-direction: row;
  }
  #upcoming li img {
    margin-left: -6.25%;
  }



  /* HOME MENU */
  #home-menu-section {
    margin-bottom: 8%;;
  }
  #home-menu-section a {
    text-decoration: none;
  }
  #home-menu-section .about-us h3,
  #home-menu-section .new-here h3,
  #home-menu-section .youth h3,
  #home-menu-section .giving h3 {
    font-size: 3rem;
  }



  /* MENU */
  #menu-section .menu a {
    text-decoration: none;
  }
  #menu-section .menu ul {
    display: flex;
    justify-content: center;
    margin-top: 2%;
  }
  #menu-section .menu li {
    border-right: 1px solid var(--black);
    font-size: 1.25rem;
    height: 3rem;
    padding: 4% 12%;
    text-align: center;
    width: 12rem;
  }



  /* MISSION BANNER */
  #mission-banner-section h3 {
    margin-bottom: 6%;
  }



  /* WHERE SECTIONS */
  #where-have-we-been-section p,
  #where-are-we-section p,
  #where-are-we-going-section p
  {
    font-size: 4rem;
    letter-spacing: 15%;
    padding: 4rem;
    transform: scaleY(4);
  }

  #where-have-we-been-section h3,
  #where-are-we-section h3,
  #where-are-we-going-section h3
  {
    padding: 2%;
  }

  #where-have-we-been-section h4,
  #where-are-we-section h4,
  #where-are-we-going-section h4
  {
    margin-bottom: -16%;
    margin-top: -16%;
    padding: 2%;
  }

  #where-are-we-going-section {
    margin-bottom: 4%;
    position: relative;
  }



  /* NEW HERE */
  #new-here-section {
    margin-bottom: 8%;
    margin-top: 8%;
  }
  #checkin-section .row > .col > .row,
  #service-times-section .row > .col > .row,
  #map-section .row > .col > .row,
  #contact-section .row > .col > .row,
  #giving-section .row > .col > .row
  {
    margin-bottom: 8%;
    padding: 4%;
  }
  #checkin-section h3,
  #service-times-section h3,
  #map-section h3,
  #contact-section h3,
  #giving-section h3
  {
    padding: 2%;
  }
  #checkin-section button,
  #contact-section button
  {
    margin-top: 4%;
    width: 100%;
  }


  /* GIVING */
  #giving-section h3 {
    margin-top: 8%;
  }
  #giving-section .blu-bg p {
    padding: 2%;
  }
  #giving-section .blu-bg span {
    padding: 4%;
  }
  #giving-section .blu-bg {
    margin-bottom: 8%;
    margin-top: 4%;
    padding: 8%;
  }



  /* FOOTER */
  #footer-section img {
    width: 10%;
  }
}