
 
.main-wrap{ width: 100%; padding:0px; margin:0px auto; height: auto;  display: flex; flex-wrap: wrap;  }
.main-about{ position: relative; margin:0px; padding:0px; }
.main-about::after{width:200%; content: attr(data-content);color: #000; font-size: 140px; font-weight: 900; word-wrap: normal;letter-spacing: 3px; -webkit-text-stroke: 1px #c2c3c4;  -webkit-text-fill-color: transparent; left:10%; top:-5%; position: absolute; z-index:1; opacity: .5;}
.main-about .animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
 @media (max-width:1024px) {
.main-about::after{width:200%; font-size: 120px;top:10%; left:0px; }
}
@media (max-width:840px) {
.main-about::after{width:200%; font-size: 120px;top:0px; }
}
@media (max-width: 767.98px) {
.main-about{ padding:40px 0px 0px 0px;background-size: 100% auto; background-position:0px top;}   
.main-about::after{width:100%; font-size: 80px;top:1%; left:0px;}
}
@media (max-width: 420px) {
.main-about::after{ font-size: 66px;}
}
@media (max-width: 320px) {
.main-about::after{ font-size: 46px;}
}
.block {width:50%; height: auto;margin: 0; padding: 2vw 6vw;}
@media (max-width: 992px) {
.block {width:100%;margin: 0px; padding: 0px 40px; }  
} 
 @media (max-width:767.98px) {
.block { padding: 0px; }  
} 
.block-txt{width:100%; max-width:80%;  margin: auto; padding:50px ;  display: block; position: relative;z-index: 9;   }
.block-txt p { font-size:1rem;  line-height:1.875rem; font-weight: 400;   margin-bottom: 10px; color:#3b3d40 }
.block-txt p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;   margin-bottom: 10px; color: #fff; }
.post-btn{  margin-top:30px; }

 @media (max-width: 1280px) {
.block-txt p { font-size:0.9rem; }
}
@media (max-width:840px) {
.block-txt{max-width:100%; margin:50px 0px; padding: 0px 40px;}   
}
@media (max-width:767.98px) {
.block-txt{  padding: 0px 10px;}   
}
@media (max-width:640px) {
.block-txt p { font-size:0.9rem; line-height: 1.5rem;  }
}
 
 

.block-pic {width:50%; height: auto;margin: 0; padding:0px;  position: relative;  }
 @media (max-width: 992px) {
.block-pic {width:100%; height: 420px; order: 2;  }
}
@media (max-width: 320px) {
.block-pic {width:100%; height: 360px; }
}
 
 
 


.grid-wrap{ width: 50%; }
.grid-flex-end{justify-content: flex-end}
.grid-flex-start{justify-content: flex-start}
.grid-card { display: grid; width: 100%; margin: auto; grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); gap:40px; padding: 15px 0px;position: relative;z-index:2}
.grid-box {   width: 100%; padding: 20px;   border:solid 1px #f8f8f8; background-color:#f8f8f8;  }
.grid-w30 h3 { font-size: 1.25rem; margin-bottom: 10px; font-weight: 700; color:#017a84}
.grid-w30 ul { margin: 0px; padding: 0px; list-style: none}
.grid-w30 ul li{ margin: 0px; padding: 0px; }
.grid-w30 figure.pho{   margin-bottom: 20px; border-radius:30px; overflow: hidden}

.grid-box-color { display: flex; flex-wrap: wrap;align-items: center; justify-content: center; width:200px; height: 200px;  padding: 20px;  border-radius:99rem;  border:solid 1px #f8f8f8; background-color:transparent;  }
.grid-box-color:nth-child(1){border: 1px solid #a2c617; background-color:#a2c617; }
.grid-box-color:nth-child(2){border: 1px solid #f59c00;  background-color:#f59c00;}
.grid-box-color:nth-child(3){border: 1px solid #017a84; background-color:#017a84; }
.grid-box-color:nth-child(4){border: 1px solid #03a9f4;  background-color:#03a9f4;}
 
.grid-box-color.grid-w30 h3 { margin:0px  auto; text-align: center; font-size: 1.25rem; margin-bottom: 10px; font-weight: 700; color:#fff}
 figure.pic-radius{ margin:30px; border-radius:30px; overflow: hidden}
 figure.pic-radius img{ border-radius:30px; overflow: hidden}
@media(max-width:1280px) {
.grid-wrap{ width: 60%; }
.grid-card {  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr)); gap:20px; padding: 15px 0px;position: relative;z-index:2}
 }
@media(max-width:1160px) {
.grid-wrap{ width: 100%; }
}

 


 
@keyframes animate-pulse{
0%{ box-shadow: 0 0 0 0 rgba(255,109,74,0.7), 0 0 0 0 rgba(255,109,74,0.7); }
40%{ box-shadow: 0 0 0 20px rgba(255,109,74,0.0), 0 0 0 0 rgba(255,109,74,0.7);  }
80%{ box-shadow: 0 0 0 20px rgba(255,109,74,0.0), 0 0 0 30px rgba(255,109,74,0); }
100%{ box-shadow: 0 0 0 0 rgba(255,109,74,0.0), 0 0 0 30px rgba(255,109,74,0);     }
}

 
/**
 * ----------------------------------------
 * animation slide-up-down
 * ----------------------------------------
*/
.slide-up-down {
  -webkit-animation: slide-up-down 1.7s ease-in-out infinite alternate both;
  animation: slide-up-down 1.7s ease-in-out infinite alternate both; }

/* ------- */
@-webkit-keyframes slide-up-down {
0% {  -webkit-transform: translateY(0); transform: translateY(0); }
100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes slide-up-down {
0% { -webkit-transform: translateY(0); transform: translateY(0); }
100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 
}
@-webkit-keyframes rotate {
to {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes rotate {
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

 
 
 