/* CSS Document */

/***********************************************************************
[Table of Contents]
--------------------

1. Classes for Containers - general classes that hold components
2. Branches Section  -  Classes that made up branches
3. Agents Section   -   Classes that made up agents
*************************************************************************/

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

/* A large containers that holds both branch section and agents section*/
   .branch_agent {
       width: 100%;
       background: #FFFFFF;
       z-index: 2;
       padding-top: 10px;
       padding-left: 10px;
       padding-right: 10px;
   }

/******************************************
   2. Branches Section
*******************************************/

/** The branches card shadow properties  **/
  .branches_card{
    border-radius: 20px;
    padding: 20px;
    -webkit-box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
   }

/*This specifies the image of each branch to have a round edges and the gap with the lower component*/
  .branches_card img {
       border-radius:15px;
       margin-bottom: 20px;
     }

/*Unordered list for the address of each branch*/
  .branch_address{
     text-align:center;
		 font-weight: 500;
		 color: #779;
     font-size:17px;}


/*Customizes the location of branche name to be center*/
#branch_header{
  text-align: center;
  color: #007bff;
}



/********************************************
    3. Agents Section
********************************************/

/*This class made the card where agents name and information is found*/
   .agent_card {
      display: flex;
      height: 340px;
      width: 100%;
      border-radius: 10px;
      transition: 0.4s ease-out;
      position: relative;
      margin-bottom: 50px;
      cursor:pointer;
      background: linear-gradient(to bottom, rgba(199,227,253,1), rgba(199,227,253,0));

    }

/* This class customizes the agent cards to move upward up on hover*/
     .agent_card:hover {
         transition: 0.4s ease-out;
         transform: translateY(-20px);
         -webkit-box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
         box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
          }

/*This class made the name of each agents*/
     .title {
        position: absolute;
        color:#007bff;
        font-size: 17px;
        top: 20px;
        left: 30%;
        font-weight: bold;
        text-align:center;

       }

/*This made the specifications needed to create the bar found below the name of agents*/
    .bar {
        position: absolute;
        top: 70px;
        height: 5px;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
          }

/*How the bar look like when it is empty */
     .emptybar {
        width: 100%;
        border-radius:80%;
        height: 100%;
        margin-bottom:50px;
        background-color: #2e3033;
          }

/* Customize the colors of the bar when it is full*/
    .filledbar {
        position: absolute;
        top: 0px;
        z-index: 3;
        border-radius:80%;
        width: 0px;
        height: 100%;
        background: rgb(0,154,217);
        background: linear-gradient(90deg, rgba(0,154,217,1) 0%, rgba(217,147,0,1) 65%, rgba(255,186,0,1) 100%);
        transition: 0.6s ease-out;
          }
/*When the mouse cursor is over the agents cards the bar will be filled with color*/
    .agent_card:hover .filledbar {
        width: 90%;
        transition: 0.4s ease-out;
          }
/* This made the individual lines that made up the address of agents*/
     .agent_address{
        color:#676;
        margin-top:15px;
        }


/** This class made up the Contact icon in the left side of the agent name **/
    .icon_contact:before{
        content: "\e8a3"; /* reference ID to the address icon which is found on the icomoon fonts **/
        font-family: 'icomoon'; /** font family of the icon **/
        left: 0;
        font-size: 20px;
        margin-left: 10px;
        position: absolute;
      }

/* This class made up the PO.BOX icon in the left side of the agent address*/
   .icon_pobox:before  {
        content: "\f01c";
        font-family: 'icomoon';
        left: 0;
        padding-right:2rem!important;
        font-size: 20px;
        margin-left: 10px;
        position: absolute;
           }
/* This class made up the landline phone icon in the left side of the agent address*/
  .icon_phone:before  {
        content: "\f095";
        font-family: 'icomoon';
        left: 0;
        padding-right:2rem!important;
        font-size: 20px;
        margin-left: 10px;
        position: absolute;
        padding:0px;
            }

/* This class made up the Mobile phone icon in the left side of the agent address*/
     .icon_mobile:before{
       content: "\f10b"; /* reference ID to the address icon which is found on the icomoon fonts **/
       font-family: 'icomoon'; /** font family of the icon **/
       left: 0;
       font-size: 28px;
       margin-left: 10px;
       position: absolute;
       padding:0px;
    }

/************
1. 768px
************/

@media only screen and (max-width: 768px)
{

/* the agents card will adjust itself when the width of the device is 768 and below*/
	.agent_card {
			width: 100%;
			padding: 30px;
      margin-left: 50px;
		}
}