:root {
  --light: #fff;
  --dark: rgba(255,255,255,0.1);
  --blue: rgba(0,80,179,0.8);
  --red: rgba(237,28,36,0.6);
  --gap : 0px;
}
#section3 .fp-tableCell {position:relative; }
#section3 .fp-tableCell:after {content:""; position: absolute; top:0; left:0; width:100%; height:100%; 
background-color:rgba(0,0,0,0.3);}
.block_07 {   position: relative;  width:100%; max-width:1250px; padding:10px 25px; margin:0 auto;}
.block_07  .head {color:#fff; font-weight:500; margin-bottom:50px }
.block_07  h3 {font-size:50px; line-height:60px; font-weight:600;  position:relative; }
.block_07  .txt {display:none ;  font-size:20px;   padding:15px 0 0px 0; }

.block_07 .category_container {   display: flex;  justify-content: space-between;  flex-wrap: nowrap;
 /*calc(var(--gap) * 2)*/;  width: 100%;  height: 100%;}
.block_07 .content {  --active: 0;  cursor: pointer;  overflow: clip;  position: relative;  z-index: 10;
  display: flex;  flex-direction: column;  gap: 1.5rem;  padding:40px 30px 0 30px; border-radius: 0px;
  width: calc((100% / 4) );  height: 400px;  transition: width 0.5s ease-in-out; margin-right:25px; 
  box-shadow:1px 1px 5px rgba(0,0,0,0.1); }
.block_07 .content:last-child {margin-right:0;}  
.block_07 .content:hover {  --active: 1;  width: calc(35% - var(--gap)); }
.block_07 .content:hover::before { background-color: var(--blue); transition: all 0.3s}
.block_07 .content::before {  content: "";  position: absolute;  z-index: -10;  top: 0;  left: 0;  width: 100%;  height: 100%;
  background-color: var(--dark);transition: all 0.3s; border-radius:0px;
  border:1px solid rgba(255,255,255,0.05); backdrop-filter: blur(8px); }
  
.block_07 .content::after {  content: "";  position: absolute;  z-index: -10;  bottom: 35px;  left: 0;  width: 100%;
height:50px; background:url(../img/arrow2.png)no-repeat  center; transition: 0.3s all ; opacity:0.8 } 
/*.block_07 .content a { position: absolute;  z-index: 0;  bottom: 0px;  left: 0;  width: 100%;height:100%;   }*/  
.block_07 .content:hover::after { background:url(../img/arrow.png)no-repeat 90%; opacity:0; transition: 0.3s all  }  
/*.block_07 .content img {  position: absolute;  z-index: -20;  top: 0;  left: 0;  width: 100%;  height: 100%;
  -o-object-fit: cover;  object-fit: cover; -o-object-position: center;   object-position: center;}
.block_07 .content .profile_image {  opacity: calc(1 - var(--active));  transition: opacity 0.5s ease-in-out;}*/

.block_07 .ico1 {background:url(../img/ico1.png)no-repeat center top;}
.block_07 .ico2 {background:url(../img/ico2.png)no-repeat center top;}
.block_07 .ico3 {background:url(../img/ico3.png)no-repeat center top;}
.block_07 .ico4 {background:url(../img/ico4.png)no-repeat center top;}
.block_07 .profile_detail  {  position:relative; display: flex;  flex-direction: column;  gap: 0.5rem;  /*width: 12rem;*/
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s; padding-top:100px; transition: 0.3s all !important; }
.block_07 .content .profile_detail .info { transition: 0.3s all;  font-size: 1rem;  font-weight: 500;  color: var(--light);  text-wrap: nowrap;
border-bottom:1px solid #dfdfdf; margin-bottom:25px; padding-bottom:10px;}
.block_07 .profile_detail .info2 span{ display:block; width:200px; font-size: 13px; line-height:16px;  font-weight: 500;  color: var(--light);  }
.block_07 .profile_detail .info2 strong { font-weight:500; font-size: 22px; line-height:32px; display:block; padding-top:10px }
.block_07 .content .profile_detail .info3 {position:absolute; right:0; text-align:right; bottom:2px; opacity:0; transition: 0.3s all }

.block_07 .content:hover .profile_detail {padding-top:15px; background-position:right top; transition: 0.3s all}
.block_07 .content:hover .profile_detail .info2 span {}
.block_07 .content:hover .profile_detail .info3 {opacity:.8; transition: 0.3s all }
.block_07 .content:hover .profile_detail .info{opacity:0; transition: 0.2s all; margin-top:-50px;  margin-bottom:0px; transition: 0.3s all;}

.block_07 .profile_detail p {  font-size: 0.75rem;  font-weight: 400;  color: var(--light);}
.block_07 .profile_quote {  width: 100%;  transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));}
.block_07 .profile_quote p {  font-size: 16px; line-height:1.5em;  color: var(--light);
  transform: translate(0, calc((1 - var(--active)) * (50% + 2.5rem))); max-width:300px;
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.1s;}

.block_07 .wrapper {  display: grid;  /*grid-template-rows: 0fr;*/  overflow: hidden;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s, -ms-grid-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;}
.block_07 .profile_quote {  min-height: 0;  transform: translateY(50%);  opacity: 1;
  transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;}
.block_07 .content:hover .wrapper {  grid-template-rows: 1fr;}
.block_07 .content:hover .profile_quote {  transform: none;  opacity: 1;}

.block_07 .profile_quote span {display:block}
.block_07 .profile_quote .txt1 { font-size: 14px;  font-weight: 500;}
.block_07 .profile_quote .txt2 { font-size: 14px;  font-weight: 500; }
.block_07 .profile_quote .txt2 a{display:block; border:1px solid rgba(255,255,255,0.8); border-radius:50px; padding:10px; margin-top:10px;
text-align:center; width:150px; float:right; transition: 0.3s all}
.block_07 .profile_quote .txt2 a:hover {color:#222; background:#fff; transition: 0.3s all}
.block_07 .txtLine {padding-bottom:20px; text-decoration: line-through; color:#B1B1B1}
.block_07 .solid {border-top:1px solid rgba(255,255,255,0.8); padding-top:20px; margin-top:0px; }
.block_07 .dashed {border-top:1px dashed rgba(255,255,255,0.8); padding-top:20px; margin-top:20px; text-align:right}
.block_07 .txt3 {font-size: 1.5rem;; text-align:right}
.block_07 .color {color:#4583FF; font-family:var(--font2)}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
.block_07 {  width: calc(100% - 30px); margin:0 auto; padding:0px 0 0px 0}	
.block_07 .head {text-align:center;  margin-bottom:10px}
.block_07 h3 {font-size:25px; font-family:var(--font2); position:relative; }
.block_07 .txt {font-size:14px;   padding:10px 0 10px 0; }
.block_07 .profile_detail .info2 span{ display:block; width:100%;}
.block_07 .content {margin-right:0;}
.block_07 .content:hover {  --active: 1;  width: calc(48% - var(--gap)); }
.block_07 .category_container { flex-wrap: wrap;}
.block_07 .content{display:block; width:48%;  height: auto; padding: 1.1em .5rem 1.7em .5rem; margin: 5px 0 }
.block_07 .content .profile_detail .info{opacity:0; transition: 0.2s all; margin-top:-50px;  margin-bottom:0px; }
.block_07 .content::before { border:0px solid rgba(255,255,255,0.0); background-color: var(--blue); }
.block_07 .profile_detail {padding-top:75px; background-size:60px;} 
.block_07 .content:hover .profile_detail{padding-top:75px; background-position:top center}
.block_07 .profile_detail .info2 {font-size:13px; line-height:22px; text-align:center; }
.block_07 .profile_detail .info2 strong {font-size: 16px; }
.block_07 .profile_detail p {  font-size: 0.75rem;  font-weight: 400;  color: var(--light);}

.block_07 .profile_quote p {  font-size: 18px; line-height:1.5em;  color: var(--light);
  transform: translate(0, 0); max-width:300px;
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.1s;}
.block_07 .profile_quote {transform: translateY(0%);}
.block_07 .content::after { display:none}
.block_07 .profile_quote .txt1 {display:none; font-size: 0.8rem; margin-top:10px }
.block_07 .dashed {padding:15px 0 0px 0; margin:0 0 0px 0; border:0;}
.block_07 .profile_quote .txt2 { font-size: 12px;  font-weight: 500; }
.block_07 .profile_quote .txt2 a{display:block; background:#fff;border:0; color:#333;
  padding:2px 5px; width:100px; float:none; margin:0 auto }
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}