/* --------------------------------
   Overall layout
-------------------------------- */

 html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #fff;
    color: #222;
}

/* --------------------------------
   Logo
-------------------------------- */


.logo  {
    width: 100%;
    text-align: center;
    padding: 20px;
   
     background-color: #fbe67e;
}

.logo img {
    height: 60px;
    max-width: 90%;
    object-fit: contain;
}


.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}
/* --------------------------------
   Desktop two-column layout
-------------------------------- */
html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #fff;
    color: #222;
}
/* ================================
   MAIN LAYOUT
================================ */

.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
  row-gap: 50px;
}


/* ================================
   LEFT & RIGHT COLUMNS
================================ */

.left-column,
.right-column {
  display: flex;
  flex-direction: column;
  gap: 40px;
}


/* ================================
   IMAGE GRID - DESKTOP
================================ */

.image-grid {
  display: flex !important;
  flex-direction: row !important;
  width: 100%;
  gap: 20px;
}

.image-block {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
}

.image-block img {
  display: block;
  width: 100%;
  height: auto;
}

/* ================================
   FULL WIDTH
================================ */

.full-width {
  grid-column: 1 / -1;
}


/* ================================
   FOUR COLUMNS
================================ */

.four-column {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;

  padding-top: 40px;
  border-top: 1px solid #ccc;
}


/* ================================
   MOBILE
================================ */

@media (max-width: 700px) {

  .content {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }


  /*
     IMPORTANT:
     Don't use display: contents here.
  */

  .left-column,
  .right-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }


  /*
     Mobile ordering
  */

 @media (max-width: 768px) {

  .content {
    display: flex;
    flex-direction: column;
  }

  .left-1 {
    order: 1;
  }

  .image-grid {
    order: 2;

    grid-template-columns: 1fr;
  }

  .left-2 {
    order: 3;
  }

  .left-3 {
    order: 4;
  }

  .right-1 {
    order: 5;
  }

  .full-width {
    order: 6;
  }

}


  /*
     Four columns stack on mobile
  */

  .four-column {
    grid-template-columns: 1fr;
    gap: 30px;
    order: 6;
  }

}

/* Hidden on desktop/laptop */
.mobile-image-link {
  display: none;
}


/* Show on mobile */
@media (max-width: 768px) {

  .mobile-image-link {
    display: inline;
  }

}