/* =========================================
   CONTACT US - DESKTOP VERSION
   ========================================= */

@media (min-width: 1025px)
{
    /* Main address section */
	  .address-border
	  {
		  width: 700px;
		  height: 800px;
		  border: 1px solid;
		  padding: 20px;
		  box-shadow: 5px 10px #888888;
		  margin: 25px auto;
		  border-radius: 10px;
	  }

    /* Address, phone, email and map */
    .address-container
    {
        width: 700px;
        margin: 0 auto;
        text-align: left;
        line-height: 1.6;
    }

    .address-container h2
    {
        /*margin: 0 0 20px 0;*/
    }

    .address-container i
    {
        color: FireBrick;
        margin-right: 5px;
    }

    /* Google map */
    .map-format
    {
        width: 100%;
        margin: 25px auto 0 auto;
    }

    .map-size
    {
        width: 100%;
        height: 450px;
        display: block;
    }


    /* =====================================
       FEEDBACK SECTION
       ===================================== */

    .feedback-container
    {
        width: 1200px;
        margin: 50px auto 0 auto;
    }

    .feedback-header
    {
        text-align: center;
        margin-bottom: 30px;
    }

    /* Two-column layout */
     .feedback-format
     {
         width: 100vw;
         margin-left: calc(50% - 50vw);

         display: flex;
         align-items: flex-start;
         gap: 50px;

         background-color: #f2f2f2;
         padding: 30px calc((100vw - 1200px) / 2);
         box-sizing: border-box;
     }

    /* =====================================
       LEFT SIDE - PARAGRAPH + IMAGE
       ===================================== */

    .feedback-image-section
    {
        width: 50%;
        box-sizing: border-box;
    }

    .feedback-description
    {
        margin: 0 0 25px 0;
        line-height: 1.7;
        text-align: justify;
    }

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


    /* =====================================
       RIGHT SIDE - FORM
       ===================================== */

    .feedback-form-format
    {
        width: 50%;
        box-sizing: border-box;
    }

     .feedback-form
     {
         width: 100%;
         background-color: #ffffff;

         border: 2px solid #999;
         border-radius: 12px;

         padding: 25px;
         box-sizing: border-box;
         
         /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);*/
         box-shadow: 0 6px 15px rgba(0, 0, 0, 0.20);
     }
    .form-body
    {
        width: 100%;
    }

    .form-field
    {
        width: 100%;
        margin-bottom: 18px;
    }

    .form-field label
    {
        display: block;
        margin-bottom: 6px;
    }

    .form-field input,
    .form-field textarea
    {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
    }

    .form-field textarea
    {
        height: 250px;
        resize: vertical;
    }

    .star-color
    {
        color: red;
        margin-left: 3px;
    }

    .form-check
    {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin: 15px 0;
    }

    .form-check input
    {
        margin-top: 4px;
        flex-shrink: 0;
    }

    .form-check label
    {
        line-height: 1.5;
    }

    .form-button
    {
        text-align: center;
        margin-top: 20px;
    }

    .form-button button
    {
        width: 100%;
        padding: 10px 30px;
        font-size: 16px;
        cursor: pointer;
    }
}
@media (min-width: 768px) and (max-width: 1024px)
{
/* =========================================
   CONTACT US - TABLET VERSION
   768px TO 1024px
   ========================================= */

    /* =====================================
       ADDRESS SECTION
       ===================================== */

    .contactus-container
    {
        width: 80%;
        margin: 35px auto 0 auto;
    }

    .address-border
    {
        width: 100%;
        border: 1px solid #ccc;
        padding: 25px;
        box-sizing: border-box;
        border-radius: 12px;
        box-shadow: 5px 10px #888888;
    }

    .address-container
    {
        width: 80%;
        margin: 0 auto;
        text-align: left;
        line-height: 1.6;
    }
      .address-container i
      {
          color: FireBrick;
          font-size: 18px;
      }

    .address-container h2
    {
        margin: 0 0 15px 0;
    }

    .map-format
    {
        width: 100%;
        /*margin: 20px auto 0 auto;*/
    }

    .map-size
    {
        width: 100%;
        height: 450px;
        display: block;
    }


    /* =====================================
       FEEDBACK SECTION
       ===================================== */

    .feedback-container
    {
        width: 95%;
        margin: 40px auto 0 auto;
    }

    .feedback-header
    {
        text-align: center;
        margin-bottom: 25px;
    }

    .feedback-format
    {
        width: 100vw;
        margin-left: calc(50% - 50vw);

        display: flex;
        align-items: flex-start;
        gap: 30px;

        background-color: #f2f2f2;

        padding: 25px 2.5%;
        box-sizing: border-box;
    }


    /* =====================================
       LEFT SIDE - PARAGRAPH + IMAGE
       ===================================== */

    .feedback-image-section
    {
        width: 50%;
        box-sizing: border-box;
    }

    .feedback-description
    {
        margin: 0 0 20px 0;
        line-height: 1.6;
        text-align: justify;
    }

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


    /* =====================================
       RIGHT SIDE - FORM
       ===================================== */

    .feedback-form-format
    {
        width: 50%;
        box-sizing: border-box;
    }

    .feedback-form
    {
        width: 100%;
        background-color: #ffffff;

        border: 2px solid #999;
        border-radius: 12px;

        padding: 20px;
        box-sizing: border-box;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .form-body
    {
        width: 100%;
    }

    .form-field
    {
        width: 100%;
        margin-bottom: 15px;
    }

    .form-field label
    {
        display: block;
        margin-bottom: 5px;
    }

    .form-field input,
    .form-field textarea
    {
        width: 100%;
        box-sizing: border-box;
        padding: 9px;
        font-size: 15px;
    }

    .form-field textarea
    {
        height: 130px;
        resize: vertical;
    }
    
      .star-color
      {
          color: red;
      }

    .form-check
    {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        margin: 12px 0;
    }

    .form-check input
    {
        margin-top: 4px;
        flex-shrink: 0;
    }

    .form-check label
    {
        line-height: 1.4;
    }

    .form-button
    {
        text-align: center;
        margin-top: 15px;
    }

    .form-button button
    {
        width: 100%;
        padding: 9px 25px;
        font-size: 15px;
        cursor: pointer;
    }
}

@media (max-width: 767px)
{
/* =========================================
   CONTACT US - MOBILE VERSION
   BELOW 768px
   ========================================= */

    /* =====================================
       ADDRESS SECTION
       ===================================== */

    .contactus-container
    {
        width: 95%;
        margin: 25px auto 0 auto;
    }

    .address-border
    {
        width: 100%;
        border: 1px solid #ccc;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 5px 10px #888888;
    }

    .address-container
    {
        width: 100%;
        margin: 0 auto;
        text-align: left;
        line-height: 1.5;
    }
    
      .address-container i
      {
          color: FireBrick;
      }

    .address-container h2
    {
        margin: 0 0 15px 0;
        font-size: 18px;
    }

    .map-format
    {
        width: 100%;
        margin: 20px auto 0 auto;
    }

    .map-size
    {
        width: 100%;
        height: 220px;
        display: block;
    }


    /* =====================================
       FEEDBACK SECTION
       ===================================== */

    .feedback-container
    {
        width: 95%;
        margin: 30px auto 0 auto;
    }

    .feedback-header
    {
        text-align: center;
        margin-bottom: 20px;
    }

    .feedback-format
    {
        width: 100vw;
        margin-left: calc(50% - 50vw);

        display: flex;
        flex-direction: column;
        gap: 25px;

        background-color: #f2f2f2;

        padding: 20px 2.5%;
        box-sizing: border-box;
    }


    /* =====================================
       PARAGRAPH + IMAGE
       ===================================== */

    .feedback-image-section
    {
        width: 100%;
        box-sizing: border-box;
    }

    .feedback-description
    {
        margin: 0 0 20px 0;
        line-height: 1.6;
        text-align: justify;
    }

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


    /* =====================================
       FORM
       ===================================== */

    .feedback-form-format
    {
        width: 100%;
        box-sizing: border-box;
    }

    .feedback-form
    {
        width: 100%;
        background-color: #ffffff;

        border: 2px solid #999;
        border-radius: 12px;

        padding: 20px;
        box-sizing: border-box;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .form-body
    {
        width: 100%;
    }

    .form-field
    {
        width: 100%;
        margin-bottom: 15px;
    }

    .form-field label
    {
        display: block;
        margin-bottom: 5px;
    }

    .form-field input,
    .form-field textarea
    {
        width: 100%;
        box-sizing: border-box;
        padding: 9px;
        font-size: 15px;
    }

    .form-field textarea
    {
        height: 130px;
        resize: vertical;
    }
    
      .star-color
      {
          color: red;
      }

    .form-check
    {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        margin: 12px 0;
    }

    .form-check input
    {
        margin-top: 4px;
        flex-shrink: 0;
    }

    .form-check label
    {
        line-height: 1.4;
    }

    .form-button
    {
        text-align: center;
        margin-top: 15px;
    }

    .form-button button
    {
        width: 100%;
        padding: 9px 25px;
        font-size: 15px;
        cursor: pointer;
    }
}