/* ============================================================
   RESPONSIVE MEDIA QUERIES
   Breakpoints:
   - Tablet:  max-width: 1024px
   - Mobile:  max-width: 768px
   ============================================================ */


/* ============================================================
   TABLET — max-width: 1024px
   ============================================================ */
@media (max-width: 1024px) {

  /* HEADER */
  header {
    padding: 60px 0 80px;
  }

  header .left img{
    margin: 0 auto 20px;
  }

  header .left {
    width: 60%;
    text-align: center;
  }

  header h1 {
    font-size: 32px;
    line-height: 38px;
  }

  header p {
    font-size: 22px;
    line-height: 26px;
  }

  header ul {
    font-size: 18px;
  }

  header .right {
    width: 40%;
  }

  /* SECTIONS */
  section h2 {
    font-size: 36px;
    line-height: 40px;
  }

  section h2 span {
    font-size: 26px;
  }

  section p {
    font-size: 18px;
  }

  section .sub-head {
    font-size: 20px;
    line-height: 24px;
  }

  section ul {
    font-size: 16px;
    line-height: 30px;
  }

  section .text-center {
    width: 85%;
  }

  /* BLOCKS */
  .about-2 strong,
  .advantage strong {
    font-size: 20px;
    line-height: 24px;
  }

  .about-2 blockquote {
    width: 90%;
  }

  
   /* BRANDS */
  .brands .container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
  }


  .brands .container img {
    width: calc(50% - 25px);
    max-width: 140px;
  }


  /* METAS */
  .metas {
    padding: 120px 0 80px;
  }

  .metas .image img {
    max-width: 300px;
    top: -260px;
  }

  /* QUESTIONS */
  .questions .item strong {
    font-size: 20px;
  }

  .questions .item p {
    font-size: 17px;
  }

  /* FOOTER */
  footer{
    text-align: center;
  }

  footer img{
    max-width: 200px;
    margin: 0 auto 20px;
  }

  footer .column.first {
    width: 35%;
  }
}


/* ============================================================
   MOBILE — max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

  /* TOP BAR */
  .top-bar {
    padding: 15px 0;
  }

  .top-bar img {
    max-width: 160px;
  }

  /* HEADER */
  header {
    padding: 40px 0 50px;
    margin-bottom: 20px;
    border-radius: 0 0 14px 14px;
  }

  header .container {
    flex-direction: column;
    gap: 30px;
  }

  header .left {
    width: 100%;
  }

  header .left img {
    max-width: 200px;
    margin-bottom: 18px;
  }

  header h1 {
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 14px;
  }

  header p {
    font-size: 18px;
    line-height: 24px;
  }

  header ul {
    margin: 18px 0;
    font-size: 16px;
  }

  header .right {
    width: 100%;
    min-height: 220px;
  }

  header .right .absolute {
    position: relative;
    width: 100%;
  }

  /* SECTIONS — general layout */
  section {
    padding: 30px 0;
  }

  section .container {
    flex-direction: column;
    gap: 30px;
  }

  section h2 {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 16px;
  }

  section h2 span {
    font-size: 20px;
  }

  section p {
    font-size: 16px;
  }

  section .sub-head {
    font-size: 17px;
    line-height: 22px;
    margin-bottom: 16px;
  }

  section ul {
    font-size: 15px;
    line-height: 28px;
  }

  section .text-center {
    width: 100%;
  }

  section .image {
    width: 100%;
    position: relative;
  }

  section .content {
    width: 100%;
  }

  /* ABOUT */
  .about .block i {
    font-size: 36px;
  }

  .about .block span {
    font-size: 17px;
  }

  /* BLOCKS — stack on mobile */
  .blocks {
    flex-direction: column;
    gap: 20px;
  }

  /* ABOUT-2 */
  .about-2 {
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .about-2 i {
    font-size: 36px;
  }

  .about-2 strong {
    font-size: 18px;
  }

  .about-2 blockquote {
    width: 100%;
    font-size: 15px;
  }

  /* METAS — reset the negative positioning used on desktop */
  .metas {
    padding: 30px 0;
  }

  .metas .image {
    position: relative;
  }

  .metas .image img {
    max-width: 100%;
    top: 0;
    position: relative;
  }

  /* BRANDS */
  .brands .container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .brands .container img {
    width: 100%;
    max-width: 120px;
  }

  /* ADVANTAGE */
  .advantage {
    padding: 50px 0 60px;
  }

  .advantage i {
    font-size: 36px;
  }

  .advantage strong {
    font-size: 18px;
    line-height: 22px;
  }

  /* QUESTIONS */
  .questions {
    padding: 60px 0;
  }

  .questions .container {
    flex-direction: column;
    gap: 30px;
  }

  .questions .left,
  .questions .right {
    width: 100%;
  }

  .questions .cta {
    margin-top: 25px;
  }

  .questions .item strong {
    font-size: 17px;
  }

  .questions .item p {
    font-size: 15px;
  }

  /* FORM AREA */
  .form-area .container {
    flex-direction: column;
    gap: 30px;
  }

  .form-area .left {
    width: 100%;
  }

  .form-area .right {
    width: 100%;
  }


  /* FOOTER */
  footer {
    padding: 50px 0;
  }

  footer .container {
    flex-direction: column;
    gap: 30px;
  }

  footer .column.first {
    width: 100%;
  }

  footer .column {
    width: 100%;
  }

  footer .social i {
    font-size: 24px;
  }

  /* SIGN */
  .sign {
    text-align: center;
    font-size: 13px;
    padding: 10px 15px;
  }
}