/* CSS Document */

/***********************************************************************

[Table of Contents]

1. Classes for Containers
2. Form Input Fields classes
3. classes for Right Side Address
4. Google map
5. classes for Validations
6. Additional General Classes
*************************************************************************/


/******************************
   1. containers
*******************************/

/* Large container that holds the body (form,google map and side address)  */
.contact  {
       width: 100%;
       background: #FFFFFF;
       z-index: 2;
       padding-top: 10px;
       padding-left: 10px;
       padding-right: 10px;
      }

/* Container found inside contact container and holds only the form input components */
.contact_form_container   {
      width: 100%;
      margin-top: 10px;
    }

/* A container that holds the google map */
.map_row   {
        margin-top: 98px;
      }
  /* Plus containers from other css files  */

  /************************************************
             2. Form Input Fields
  *************************************************/

/* A class that made up the title of the form..Get in touch   */
  .section_title {
         font-size: 25px;
         font-weight: bold;
         color: #007BFF;
         padding-top: 5px;
         text-align: center;
         padding-top:20px;
        }

/* A class that defines the appearance of text input fields */
.contact_input {
              color: #333;
              width: 100%;
              height: 45px;
              background-color: #eaeaea;
              border: none;
              outline: none;
              border-radius: 10px;
              padding-left: 22px;
              font-weight:400;
              font-size:16px;
            }

/* when the mouse moves over text input fields the background color and border color will be changed*/
.contact_input:hover   {
             background-color: #e7f0ff;
             border: solid 2px #007BFF;
            }

/* Customizes the appearance of the text inside input fields (placeholder) to italic and sets its color*/
.contact_input::placeholder   {

             color:#8a8a8a;
             padding-left:3px;
           }

 /* When the text input field get focus its background color and border color will be changed*/
.contact_input:focus  {
            background-color: #e7f0ff;
            border: solid 2px #007BFF;
          }

/* A class that made up the appearance of the text area*/
.contact_textarea   {
            	height: 165px;
              padding-top: 15px;
              resize: none;
            }

/* A class that customize the look of dropdown box*/
.select_catagory select   {
            border: none;
            width: 100%;
            height: 45px;
            padding-left: 15px;
            font-size: 16px;
            font-weight: 400;
            color: #6c6a74;
            background: #eaeaea;
            border-top-left-radius: 10px;    /* both the top corners will have round edges*/
            border-top-right-radius: 10px;
            outline:none;
          }

/* What the drop down is going to look like when the mouse move over (hovers) it */
.select_catagory select:hover   {
           background-color: #e7f0ff;
           border: solid 2px #007BFF;
          }

/* To adjust the horizontal gap between text input fields*/
.field_gap   {
         margin-bottom: 12px;
         }

/*This sets the font and background of message sending success or failed status*/
 #status  {
            padding-bottom:15px;
            color:#007bff;
            text-align:center;
            font-size: 20px;
            margin-bottom:15px;
                  }
  /***********************************************
              3. Right Side Address
  ***********************************************/

.contact_address {
            margin-top: 25px;
          }

/*  A containers that holds the address and icon in the right side of the page*/
.contact_address__icon {
           margin-right: 20px;
           }

 /* sets the one line of the contact us address information */
.contact_address__icon span, .contact_address__icon span {
          color: #8f9195;
          font-size: 27px;
           }
/* Sets the specifications of heading in the contact us address located in the right side*/
.contact_address .media-body h3 {
          font-size: 16px;
          margin-bottom: 0;
          font-size: 16px;
          color: #007bff;
          font-weight: 700;
          padding-left: 20px;
          margin: auto;
           }

/* Sets the properties of the links and headlines in the top right side of the page*/
.contact_address .media-body a h3 {
          font-size: 16px;
          margin-bottom: 0;
          color: #007bff;
          font-weight: 700;
          padding-left: 20px;
          cursor: pointer;
           }

/* customizes all the paragraphs in the right side of the page */
.contact_address .media-body p {
        color: #8a8a8a;
        padding-left: 20px;
        font-size: 15px;
       margin-bottom: 0rem;
           }
/* customizes all the paragraphs in the right side of the page */
.contact_address .media-body span {
        color: #8a8a8a;
        padding-left: 25px;
        font-size: 15px;
          }

   /*****************************  Icons for the right side Address ***********************/
/* this made up the address icon in the right side of the page*/
.icon_address:before   {
        content: "\e8b4";
        font-family: 'icomoon';
        left: 0;
        padding-right:2rem!important;
        font-size: 1.3em;
        position: absolute;
           }

/* This class made up the PO.BOX icon in the right side of the page*/
.icon_pobox:before  {
        content: "\f01c";
        font-family: 'icomoon';
        left: 0;
        padding-right:2rem!important;
        font-size: 1.3em;
        position: absolute;
           }

/* this made up the telephone icon in the right side of the page*/
.icon_phone:before  {
        content: "\f095";
        font-family: 'icomoon';
        left: 0;
        padding-right:2rem!important;
        font-size: 1.3em;
        position: absolute;
           }

/* It made up the fax icon in the right side of the page*/
.icon_fax:before   {
        content: "\f1ac";
        font-family: 'icomoon';
        left: 0;
        padding-right:2rem!important;
        font-size: 1.3em;
        position: absolute;
           }

/* It made up the email icon in the right side of the page*/
  .icon_email:before   {
        content: "\f0e0";
        font-family: 'icomoon';
        left: 0;
        padding-right:2rem!important;
        font-size: 1.3em;
        position: absolute;
                   }
/* It made up the clock icon in the right side of the page*/
  .icon_clock:before   {
      content: "\f017";
      font-family: 'icomoon';
      left: 0;
      font-size: 1.2em;
      padding-left: 20px;
      position: absolute;
  }

  /* It made up the clock icon in the right side of the page*/
    .icon_whatsapp:before   {
        content: "\f232";
        font-family: 'icomoon';
        left: 0;
        font-size: 0.9em;
        padding-left: 10px;
        position: absolute;

    }



/****************************************************
                  4. Google map
*****************************************************/

/*The frame that holds the google map*/
iframe   {
         width:100%;
         height:750px;
       }

/* Holds the google map in the page*/
  .map_container   {
            width: 100%;
          	height: 100%;
            overflow: hidden;
          }

/**************************************************
                  5. Validation
**************************************************/

/* When the user enters invalid data in the text input field this will made its border red*/
.loss   {
       border:1px solid red;
       }
/*When the user corrects the input data this class removes the red border*/
.win   {border:none;}

/* Disable firefox input fields border sahdow */
input {
 box-shadow: none
}

/* when the user corrects the invalid data this will remove the red border*/
.contact_input:required{ box-shadow: none;}

/* when the user inputs invalid data a small box will pop under the text input field*/
.notify  {
       display:none;
       visibility: visible;
       width:75%;
       background-color: #CE5454;
       color: #fff;
       padding: 4px 0;
       border-radius: 6px;
       text-align: center;
       left: 20px;
       top:10px;
       opacity: 1;
       font-size: 15px;
       transition: opacity 0.3s;
     				}

/* The small arrow at the top of each notification box*/
.notify::after {

     		content: "";
     		position: absolute;
     		top: -50%;
     		left: 10%;
     		margin-left: -8px;
     		border-width: 8px;
     		border-style: solid;
     		border-color:  transparent transparent #CE5454 transparent;
     				}

/***********************************************
6. Additional General Classes
**********************************************/

/* All the transition in the page will take effect after 2 seconds*/
*, *::before, *::after   {
       transition:all .2s ease-in-out;
      }
/*All the containers and elements in the page will have such customization unless specifically set*/
*   {
       margin: 0;
       padding: 0;
       -webkit-font-smoothing: antialiased;
       -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
        text-shadow: rgba(0,0,0,.01) 0 0 1px;
       }
/* unless elements in the body are customized specifically they will be set with this customizations rules*/
body   {
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-weight: 400;
        background: #FFFFFF;
        color: #a5a5a5;
      }

div   {
       display: block;
       position: relative;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
      }

/*Sets the gap between the form and the google map containers*/
.contact_form > div:not(:last-child)   {
      	margin-bottom: 14px;
      }

/*The horizontal rule at the top of input form or below get in touch string*/
#horizontal_rule   {
          margin-bottom: 10px;
          }

/* This set the position of the icon picture in the top right side of the page and the gap between upper and lower components*/
.icon_picture   {
         margin-top: 16%;
         margin-bottom:30px;
       }