@import "../css/base.css";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#avatar {
  display: block;
  background-color: #F5F5F5;
}

body {
background-color: white;
}
#name {
  font-weight: bold;
  font-size: large;
}

#qualifications {
  color: blue;
}

 .iconbg {
    background-color: cornflowerblue;
    position: relative;
    width: 60%;
    height: 0;
    padding-bottom: 60%;
} 

.icon {
  border-radius: 50%;
  background-color: white;
  color: black;
  text-align: center;
  /*padding: 3px;*/
  /*margin: 3px;*/
     font-size: 25px;
      width: 35px;
}

.center {
  padding: 10px;
}

.col.s2 {
  padding: 0;
}

.col.s8,
.col.s10 {
  height: 4rem;
  background-color: #F5F5F5;
}

.square {
  height: 4rem;
  width: 4rem;
  position: relative;
  
}

#experience {
    text-align: center;
    line-height: 1em;
    padding-right: 0px;
    padding-left: 0px;
}

#exp_yrs {
    font-size: 2rem;
    font-weight: 800;
    font-style:italic;
    
}

#expY_label {
    font-size: 1.2rem;
    font-weight: 500;
}

#expE_label {
    font-size: 0.9rem;
}



#businessname {
  font-weight: bold;
  text-align: left;
}

#businessaddr {
  text-align: left;
  font-size: 0.8rem;
  color: blueviolet;
  
}

#hospital {
  background-color:#F5F5F5 ;
  margin-top: 5px;
}


#business {
  height: 100%;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 50%;
  padding: 10px 0;
}


#mapid {
  height: 100px;
  background-image: url("../images/map.png");
  /* Add the blur effect */
  border-left: 0.5px solid lightgray;
  
}

#mapicon {
  backdrop-filter: blur(2px);
  height: 100%;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
#payment {
  display: inline-block;
}

#payment > img {
  border: 1px solid cornflowerblue;
  margin: 2px;
  padding: 5px;
}

#contact {
  color: cornflowerblue;
  display: inline;  
  float:right; 
  
  padding-right: 10px;
}

#contact > i {
  padding: 8px;
}

#savetext {
  display: inline-block;
  height: 100%;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style for the container holding all three columns */
.time-ranges {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Ensures that the columns stretch to have the same height */
    padding: 1px 2px;
}

/* Common style for all columns */
.column {
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content within each cell */
    text-align: center;
}

/* Style for the 'Timings' column */
.timing {
    background-color: cornflowerblue; /* Light gray background for the timings column */
    width: 24%;
    color: white;
    font-size: 0.875em ;
}

/* Style for the morning time range column */
.range {
    background-color: #F5F5F5; /* Light yellow for morning */
    width:38%;
}

.slotlabel {
  font-style: italic;
  color: blue;
  font-weight: bold;
}


#announcement {
    font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

.fa {
  padding: 5px;

  /*margin-left:5px;*/
  /*margin-right:5px;*/
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa:hover {
    opacity: 0.7;
}

.fa-google {
  background: #DD4B39;
  color: white;
}

.fa-linkedin {
  background: #007BB5;
  color: white;
}

.fa-youtube {
  background: #BB0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.social {
      font-size: 30px;
      width: 40px;
      margin: 0px 5px;
}

.fa-globe {
  background: #125688;
  color: white;
 
}