@media only screen and (max-width: 1024px) {
  /* Fonts */
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.7rem;
  }
  h3 {
    font-size: 1.3rem;
  }
  h4 {
    font-size: 1.1rem;
  }

  /* btn */
  .btn-1 {
    padding: 1rem 2rem;
    font-size: 0.7rem;
  }
  .btn-2 {
    padding: 0.7rem 1.9rem;
    font-size: 0.7rem;
  }

  .btn-carousel {
    padding: 1rem 2rem;
    font-size: 0.7rem;
  }

  #header .logo {
    margin: 0 auto;
    padding: 0;
  }

  /* --------------------------------------- Home -----------------------------*/

  /* Section b */

  .section-b .carousel-btn h3 {
    font-size: 0.7rem;
  }

  .section-b .carousel-btn {
    padding: 0 0 2rem 0;
  }

  .section-b .index-gallery .row {
    margin-top: 2em;
  }

  .section-b .index-gallery .row {
    width: 14rem;
    height: 5rem;
  }

  .section-b .index-gallery img {
    width: 7rem;
    height: 7rem;
  }

  /* Section C */

  .section-c .row .col-6 {
    width: 100%;
    padding-top: 5rem;
  }

  .section-c .join {
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .section-c form {
    margin: 0 auto;
    height: 25rem;
  }

  /* Section D */
  .section-d .col-6 {
    padding: none;
    width: 100%;
  }

  .section-d .btns {
    margin-left: 0;
    width: 100%;
  }

  /* -------------------------------- About ----------------------- */
  /* about b */
  .about-b .row .container {
    margin-left: 0;
  }

  .about-b .col-3 {
    padding: 2rem 0.8rem;
  }

  .about-b .row {
    display: block;
    margin: 0 auto;
    width: 45rem;
  }

  .about-b .box {
    font: 1rem;
    width: 9.5rem;
  }

  .about-b .box h3 {
    font-size: 1rem;
  }

  /* About C */
  .about-c .customer-1,
  .about-c .customer-2 {
    margin: 0 1rem;
  }

  .about-c .customer-1 img,
  .about-c .customer-2 img {
    height: 10rem;
    width: 10rem;
  }
  /* -------------------------------- Pricing ----------------------- */
  .pricing-b {
    padding: 0 0 5rem 0;
    height: auto;
  }

  .pricing-b .col-4 {
    padding: 0.7rem;
  }

  .pricing-b .col-4 .card {
    margin: 0;
    height: 500px;
    width: 14.3rem;
  }

  .pricing-b .col-4 .card h3 {
    font-size: 0.9rem;
  }

  .pricing-b .col-4 .card h2 {
    font-size: 1.5rem;
  }

  .pricing-b .col-4 .card .price {
    margin-top: 9.5rem;
  }

  .pricing-b .col-4 .card .price span {
    font-size: 4rem;
  }

  /* ------------------------------- Gallery --------------------- */

  .gallery-a h1,
  .gallery-a h3 {
    width: 100%;
  }

  /* ----------------------------- Contact -------------------- */
  .contact-a .text-container {
    width: 100%;
  }

  .contact-b .input {
    width: 60%;
  }

  .contact-b .input .btn-1 {
    width: 60%;
  }

  /* -------------------------- Footer -------------------------- */
  footer {
    height: 150px;
  }

  footer .col-4 {
    display: block;
    padding: 0;
  }

  footer .row {
    width: 90%;
    margin: 0 auto;
  }

  footer .row i {
    font-size: 2rem;
  }

  footer .col-6 {
    padding: 0;
  }

  footer h3 {
    margin-bottom: 0;
    font-size: 0.8rem;
  }
}

/* --------------------------------- TABLET --------------------------------------- */
@media only screen and (max-width: 768px) {
  /* Reset tablet */
  [class*="col-"] {
    width: 100%;
  }

  /* ------------------------------  Navbar --------------------------------------- */

  #header {
    padding: 0;
  }

  #header .logo {
    margin: 0 auto;
    width: 18rem;
  }

  #header .navbar {
    display: block;
    padding: 0;
  }

  #header .navbar li {
    padding: 0.8rem 0;
    border-bottom: 1px dotted rgb(255, 255, 255);
    text-align: center;
    width: 100%;
  }

  #header .navbar li:first-child {
    border-top: 1px dotted rgb(255, 255, 255);
  }

  /* Section A ------------------------- Home ---------------------------------------- */
  .section-a .heading {
    width: auto;
    margin: 15rem 0 0 0;
    text-align: center;
  }

  .section-a .img-container {
    display: none;
  }

  /* Section B - Home */
  .section-b .row-1 h3 {
    max-width: 25rem;
  }

  .section-b .index-gallery .row .col-6 {
    width: 50%;
  }

  .section-b .row-2 h3,
  .section-b .row-3 h3 {
    margin: 0;
  }

  .section-b .row-3 .single-picture {
    display: none;
  }

  /* Section C -  Home */
  .section-c .row form {
    width: 350px;
    text-align: center;
  }

  .section-c form .input {
    margin: 0;
  }

  /* Section D - Home */

  .section-d {
    height: 700px;
  }

  .section-d .row .col-6 {
    height: 25rem;
  }
  .section-d .btns {
    margin-top: 19rem;
  }

  .section-d .imgbreak {
    max-height: 30rem;
  }

  /* ---------------------------- About ------------------------------------ */
  /* About A */
  .about-a .text {
    width: 100%;
  }

  /* About B */
  .about-b .row {
    width: 100%;
    display: block;
    margin: 0 auto;
  }

  .about-b .row:nth-child(2) {
    display: none;
  }

  .about-b .row .col-3 {
    width: 45%;
    padding: 1rem 8%;
  }

  /* About C */
  .about-c {
    height: 1200px;
  }

  .about-c .container .customer-1,
  .about-c .container .customer-2 {
    display: block;
    text-align: center;
    margin: 3rem 0;
    height: 25rem;
  }

  .about-c .container .customer-1 img,
  .about-c .container .customer-2 img {
    display: block;
    margin: 0 auto;
  }

  .about-c .container .customer-1 h3,
  .about-c .container .customer-2 h3 {
    width: 100%;
    margin: 1rem 0;
  }

  .about-c .container .customer-1 h4,
  .about-c .container .customer-2 h4 {
    margin: 1rem;
  }

  /* ---------------------------------- Pricing ----------------------- */
  /* Pricing A */
  .pricing-a h3 {
    width: 100%;
  }

  /* Pricing B */
  .pricing-b .col-4 .card {
    height: 22rem;
    margin: 0 auto;
  }

  .pricing-b .col-4 .card h3 {
    margin: 0;
    padding: 1rem 0 0 0;
  }

  .pricing-b .col-4 .card h2 {
    padding: 2rem 0 0 0;
  }

  .pricing-b .col-4 .card .price {
    margin: 5rem 0 0 0;
  }

  /* ------------------------------------ Gallery ----------------------------- */
  .gallery-a h1,
  .gallery-a h2 {
    width: 100%;
  }

  /* ----------------------------------- Contact -----------------------  */
  .contact-b .input {
    width: 90%;
  }

  footer ul {
    margin: 0;
    padding-left: 0;
  }
  /* ----------------------------------- Contact --------------------- */
}

@media only screen and (max-width: 425px) {
  /* Section C - HOME */
  .section-c .row form {
    width: 90%;
    text-align: center;
  }

  /* Section D - HOME */

  .section-d {
    padding: 4rem 0;
    height: 500px;
  }

  /* ----------------------------------- About B ------------------------ */
  .about-b .col-3 {
    padding: 0;
  }

  .about-b .col-3 .box {
    width: 8rem;
  }
}

@media only screen and (max-width: 375px) {
  #header .logo {
    width: 100%;
  }

  #header .logo img {
    padding-left: 1rem;
  }

  #header .logo h3 {
    padding: 0 0.5rem;
    font-size: 1.19rem;
  }

  .section-b {
    height: 1000px;
  }

  .section-b .carousel {
    padding: 0;
  }

  .section-b .carousel .carousel-btn {
    display: block;
    width: 50%;
    margin: 0 auto;
  }

  .section-b .icons .row {
    display: block;
    width: 100%;
  }

  .section-b .icons .row .col-4 {
    width: 78px;
  }

  .section-b .icons .row .small-box {
    width: 70px;
    margin: 0;
  }

  .section-b .row-2 img {
    display: none;
  }

  /* Section C - HOME */
  .section-c form .input {
    padding-top: 1rem;
  }

  /* Section D - HOME*/
  .section-d .btns a {
    display: none;
  }

  /* ------------------ ABOUT --------------- */

  .about-b .container .col-3 {
    padding: 0.5rem;
  }

  .about-b .container .col-3 .box {
    width: 7rem;
    height: 11rem;
  }

  .about-b .container .col-3 i {
    font-size: 2rem;
  }

  /* FOOTER */
  footer {
    height: 200px;
  }

  footer ul li a {
    display: block;
    text-align: center;
  }
}

@media only screen and (max-height: 700px) {
  .gallery-a h1 {
    margin-top: -25%;
  }
}