Solara Afis

.solara-tl1{
  background: var(--color);
  border: var(--border);
  width: 751px;
  height: auto;
  margin: auto;
  padding: 0px;
  border-radius: 10px;
  position: relative;
  font-family: Montserrat;
}
.afis-tt1{
  width: 500px;
}
.afis-tt1 .solara-shape:before{
  left: 80px;
  width: 200px;
}
.afis-tt1 .solara-shape{
  border-left: #eee 30px solid;
  border-right: #eee 30px solid;
}
img.afis-img{
  width: 120px;
  position: absolute;
  border-radius: 100%;
  top: 20px;
  right: 20px;
}
.afis-tt1 .desc{
  background: #f5f5f5;
  margin: 20px;
  padding: 20px;
  border: #ddd 1px solid;
  border-radius: 10px;
  text-align: justify;
  font-size: 12px;
  max-height: 250px;
}
.afis-tt1 .desc b{
  color: var(--color);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 17px;
  text-align: center;
  display: block;
  padding: 10px;
}
.afis-tt1 .desc1 p{
 border: 20px transparent solid;
 max-height: 190px;
  overflow: auto;
  padding: 0px 10px;
  margin-top: -10px;
}
.salv-tt1 .solara-shape{
  margin-top: 70px;
}
.afis-tt1 .solara-shape:before{
  left: 80px;
  width: 200px;
}
.afis-tt1 .solara-shape{
  border-left: #eee 30px solid;
  border-right: #eee 30px solid;
}
.afis-name{
  font-weight: 900;
  text-aign: right;
  font-size: 35px;
  color: var(--color);
  text-transform: uppercase;
  padding: 20px;
  margin-top: -70px;
  width: 400px;
  text-align: center;
}
.solara-tl1 .exp-name{
  position: absolute;
  top: 85px;
  width: 330px;
  left: 190px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -2px;
  font-family: Poppins;
  color: var(--color);
  line-height: .8;
  padding-right: 30px;
}
.exp-name b{
  font-weight: 700;
  opacity: .5;;
  margin-left: 10px;
  float: right;
  display: block;
  margin-top: -0px;
  margin-right: -30px;
  font-size: 30px;
  position: absolute;
  top: 0px;
  right: 10px;
}
.solara-shape{
  background: var(--back3);
  margin: 120px 0px 20px;
  border-radius: 0px;
  border-left: 50px solid var(--back1);
  border-right: 50px solid var(--back1);
  padding-bottom: 10px;
}
.solara-shape:before{
  content: '';
  width: 430px;
  height: 80px;
  background: var(--back3);
  display: block;
  border-radius: 10px;
  top: -60px;
  position: relative;
  transform: perspective(5px) rotateX(1deg);
  margin: auto;
}
.exp-left{
  left: 20px;
}
.exp-left:before{
  content: '\e920';
  font-family:'cappuccicons';
  margin-right: 10px;
  background: #333;
  display: inline-block;
  width: 12px;
  height: 12px;
  padding: 7px;
  border-radius: 100%;
  font-size: 11px;
}
.exp-right{
  right: 30px;
}
.exp-right:after{
  content: '\e921';
  font-family:'cappuccicons';
  margin-left: 10px;
  background: #333;
  display: inline-block;
  width: 12px;
  height: 12px;
  padding: 7px;
  border-radius: 100%;
  font-size: 11px;
}
.exp-left, .exp-right{
  position: absolute;
  top: 20px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.exp-left b, .exp-right b{
  opacity: .5;
  text-transform: uppercase;
  padding: 0px 10px
}



.afis-tt1{
  --color:#237375;
  --color2:#93c1c2;
  --grad: linear-gradient(90deg, var(--color) 7%, rgba(147,193,194,1) 100%);
  --grad2: linear-gradient(90deg, rgba(35,115,117,1) 7%, rgba(89,213,196,1) 100%);
  --gradL: linear-gradient(90deg, rgba(35,115,117,1) 4%, rgba(255,255,255,1) 100%);
  --grad3: linear-gradient(90deg, rgba(155,193,194,1) 4%, rgba(56,154,157,1) 100%);

  --shadowC: var(--color) 1px 0,var(--color) -0 -1px,var(--color) -1px 0,var(--color) 0 1px,var(--color) 1px 1px,var(--color) -1px -1px;
  --shadowL: var(--dark) 1px 0,var(--dark) -0 -1px,var(--dark) -1px 0,var(--dark) 0 1px,var(--dark) 1px 1px,var(--dark) -1px -1px;

  --textShadow: 0px 0px 4px rgb(15 15 15 / 50%);

  --back1:#eeeeee;
  --back2:#fbfbfb;
  --back3:#fefefe;
  --back4: #f5f5f5;
  --text: #333;

  --dark: #333;
  --dark2: #333;
  --border: #dbdbdb 1px solid;

  --header: url('https://via.placeholder.com/1200x400')
}