/* ====== CSS ====== */

.country-bg{
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 500px;
}

.country-bg::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--color-dark);
  opacity: .75;
}

.country-wrap{
  position: relative;
  background: var(--color-white);
  border-radius: 60px;
  padding: 30px;
}

.country-item{
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--theme-color-light);
  border-radius: 40px;
  padding: 15px 16px;
}

.country-img{
  width: 100px;
}

.country-item:hover .country-img img{
  transform: rotate(360deg);
}

.country-content{
  flex: 1;
}

.country-content h4{
  color: var(--color-dark);
  font-size: 20px;
}

.country-content h4 a:hover{
  color: var(--theme-color);
}

.country-content p{
  margin: 5px 0 7px 0;
}

.country-item .theme-btn{
  padding: 4px 12px;
}

/* country-area2 */
.country-area2 .country-item{
  flex-direction: column;
  text-align: center;
  padding: 15px 15px 30px 15px;
  border-radius: 60px;
}

.country-area2 .country-banner-img img{
  border-radius: 50px;
}

.country-area2 .country-img{
  margin-top: -60px;
}

.country-area2 .country-img img{
  width: 70px;
  border: 5px solid var(--color-white);
  border-radius: 50px;
}

.country-area2 .country-content .theme-btn{
  margin-top: 10px;
}



.country-img img {
  border-radius:50%;
  border: 7px solid #fff;
}