.contact-list{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
.contact-list .contact-item{width:31%;background:#FFFFFF;box-shadow:0px 3px 8px 0px rgba(19,20,21,.17);padding:4%;text-align:center;transition:all .1s linear}
.contact-list .contact-item:hover{box-shadow:0px 3px 8px 0px rgba(19,20,21,.25)}
.contact-list .contact-item:hover em{font-size:var(--fontsize28,28px)}
.contact-list .contact-item em{background:var(--color);width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;color:#FFFFFF;font-size:var(--fontsize22);transition:all .2s linear}
.contact-list .contact-item .contact-item-title{font-weight:var(--fontbold7);font-size:var(--fontsize22);margin:20px 0px}
.contact-list .contact-item .contact-item-text{word-wrap:break-word;word-break:break-all}
.contact-list .contact-item .contact-item-text a{color:var(--fontcolor);text-decoration:none;margin-right:10px}
.contact-list .contact-item .contact-item-text a:hover{color:var(--color)}
.contact-box{margin-top:70px;display:flex;flex-wrap:wrap;justify-content:space-between;box-shadow:0px 3px 8px 0px rgba(19,20,21,.17)}
.contact-box .contact-img{width:45%}
.contact-box .contact-img img{width:100%;height:100%;object-fit:cover}
.contact-box .contact-img iframe{width:100%;height:100%}
.contact-box .contact-main{flex:1;padding:40px 30px 20px}
.contact-box .contact-main .title{color:var(--fontcolor);font-size:var(--fontsize26);font-weight:var(--fontbold7);position:relative;padding-bottom:10px;margin-bottom:10px;text-transform:capitalize}
.contact-box .contact-main .title::after{content:"";position:absolute;left:0px;bottom:0px;width:81px;height:2px;background:var(--color)}

.contact-list .contact-item{padding:2%}
@media (max-width:1024px){.contact-box .contact-main .title{font-size:var(--fontsize22)}}
@media (max-width:768px) {
  .contact-list .contact-item{width:100%;margin-bottom:20px;padding:20px 2%}
  .contact-list .contact-item em{width:40px;height:40px}
  .contact-list .contact-item .contact-item-title{font-size:var(--fontsize18);margin:10px 0px}
  .contact-box{margin-top:20px}
  .contact-box .contact-img{width:100%}
  .contact-box .contact-main{padding:15px}
}

.contact-list{align-items: initial;}
@media (min-width:769px){.contact-list .contact-item{width:24%}}
.contact-box{flex-direction:column-reverse;box-shadow:0 0 0;}
.contact-box .contact-img{width:100%;}
.contact-box .contact-img iframe{height:400px;display:block;width:100%;}
.contact-box .contact-main{padding:0 0 20px;}