body{font-family:"arial";}
.f12 {font-size: 12px; line-height: 160%;}
.f13 {font-size: 13px; line-height: 160%;}
.f14 {font-size: 14px; line-height: 160%;}
.f15 {font-size: 15px; line-height: 160%;}
.f16 {font-size: 16px; line-height: 150%;}
.f17 {font-size: 17px; line-height: 160%;}
.f18 {font-size: 18px; line-height: 160%;}
.f20 {font-size: 20px; line-height: 160%;}
.f21 {font-size: 21px; line-height: 160%;}
.f22 {font-size: 22px; line-height: 160%;}
.f23 {font-size: 23px; line-height: 160%;}
.f25 {font-size: 25px; line-height: 160%;}
.f26 {font-size: 26px; line-height: 160%;}
.f27 {font-size: 27px; line-height: 160%;}
.f28 {font-size: 28px; line-height: 160%;}
.f30 {font-size: 30px; line-height: 160%;}

.mtop10 {margin-top: 10px;}
.mtop20 {margin-top: 20px;}

.blue {color: #0167b1;}

.head-area {margin-top: 60px;}
.headline01 {background: #3CA8E1;
background: linear-gradient(90deg, rgba(60, 168, 225, 0) 0%, rgba(60, 168, 225, 1) 12%, rgba(60, 168, 225, 1) 90%, rgba(60, 168, 225, 0) 100%); height: 2px; width: 300px; margin: 0 auto;}
.head01 {text-align: center; }
.headline02 {background: #3CA8E1;
background: linear-gradient(90deg, rgba(60, 168, 225, 0) 0%, rgba(60, 168, 225, 1) 12%, rgba(60, 168, 225, 1) 90%, rgba(60, 168, 225, 0) 100%); height: 2px; width: 550px; margin: 0 auto;}
.headline03 {background: #3CA8E1;
background: linear-gradient(90deg, rgba(60, 168, 225, 0) 0%, rgba(60, 168, 225, 1) 12%, rgba(60, 168, 225, 1) 90%, rgba(60, 168, 225, 0) 100%); height: 2px; width: 550px; margin: 0 auto;}
.head01 {text-align: center; }
.head01 img {height: 85px; text-align: center; margin-top: -45px;}

.sbox-area {display: flex; flex-wrap: wrap; justify-content: center;}
.sbox {display: inline-block; padding:0px 25px; width: 50%;  cursor: pointer; margin-top: 30px;}
.sbox3 {display: inline-block; padding:0px 15px; width: 33%;  cursor: pointer; margin-top: 30px;}
.sbox1 {display: inline-block; padding:0px 15px; width: 100%;  cursor: pointer; margin-top: 30px;}
.boxs { padding: 0px;  }
.bicon {text-align: center; margin-top: 10px;}
.bicon img {width: 140px; transition: transform .2s;}
.bword {text-align: center; color: #005bac; margin-top: 15px; font-weight: bold; height: 40px;}
.arro {text-align: center;}
.arro img {width: 20px;}
.pointnew {margin-top: 10px; text-align: center;}
.high1 {min-height: 170px;}
.high2 {min-height: 50px;}
.pointnew li::before {content: "•"; color: #005bac;}
.pointnew li::before {content: "•";color: #005bac; display: inline-block; width: 1em; margin-left: -1em}
#container img {transition: transform 0s;   /* smoother zoom */}
#container:hover img {transition: all .5s; transform: scale(1.1);}

.solutions {margin-top: 20px; padding-left:40px; }
.gbox:after {display:table; clear:both; content:"";}	
.gbox {background-color: #f2f2f2; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 20px; border-top: 3px solid #036eb0; margin-top: 40px;}
.gicon {width: 80px; float: left; margin-left: -60px; margin-top: -60px;}
.gdec {padding-left: 20px;}
.odec li {margin-left: 20px;}
.odec li::before {content: "•"; color: #e98404; display: inline-block; width: 1em; margin-left: -1em}


#sol .head {transition: background-color -0.3s, color -0.3s;}
#sol .arr {height: 15px;  margin-top: 10px; transition: transform 0.5s;}
#sol .rotate {transform: rotate(180deg); /* Change this value to adjust the rotation angle */}
#sol .open {}
#sol .farr {text-align: center;}

.act-area {margin-top: 50px;}

.actbg {background: #FFFFFF;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 36%, rgba(234, 241, 244, 1) 100%); height: 120px;}

.act-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: -15px;
margin-right: -15px;
margin-top: -120px;	
}
.act-col{
margin: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 99, 158, 0.27);
width: 200px;	
height: 200px;
background-color: #ffffff;	
}
.act-box {
width: 100%;	
height: 100%;
padding: 20px;
padding: 20px;
align-items: center;
position: relative;
}
.act-dec {text-align: center; line-height: 23px;}
.act-icon {position: absolute; top: 75px; left: 50%; transform: translateX(-50%);}
.act-icon img {width: 60px;}
.act-btn {position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px;}
.actbtn {background: #155bab;
background: linear-gradient(30deg, rgba(21, 91, 171, 1) 30%, rgba(0, 119, 199, 1) 100%); border-radius: 15px; height: 30px; line-height: 30px; font-weight: bold; display: inline-block; color: #ffffff; min-width: 100px; text-align: center; transition: transform 0.3s ease-in-out; min-width: 120px;}
.actbtn:hover {color: #ffffff; background: #0d4280;
background: linear-gradient(30deg, rgba(13, 66, 128, 1) 30%, rgba(0, 93, 156, 1) 100%); transform: scale(1.1);}
.lendicon {float: left;}
.lendicon img {width: 84px;}
.lendword {padding-left: 100px; padding-top: 25px;}

.lendbg {background: #FFFFFF;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 5%, rgba(234, 241, 244, 1) 100%); padding-bottom: 30px;}
.lendbox {background-color: #ffffff; padding: 20px;}

.aTable {border: none; margin: 0 auto; width: 100%; margin-top: 15px; }
.aTable th { padding: 5px 10px; background-color: #fff;  border-bottom: 1px solid #0d6c29;  border-top: 1px solid #fff; border-right: 1px solid #fff; border-left: 1px solid #fff; }
.aTable td { padding: 20px; background-color: #fff;  border-right: 1px solid #fff; border-left: 1px solid #fff; text-align: center; }
.aTable td:first-child {text-align: left;}
.aTable tr { border-bottom: 1px solid #d9d9d9;}
.aTable .bottom { border-bottom: 2px solid #0167b3; }
.bottomw1 { border-bottom: 2px solid #ffffff; }
.topw1 { border-top: 2px solid #ffffff; }
.aTable .bg1 {background-color: #3292cd; border-top-left-radius: 30px; border-left: 1px solid #fff; color: #ffffff; border-bottom: 1px solid #fff;}
.aTable .bg2 {background-color: #0167b3; color: #ffffff;  border-bottom: 1px solid #fff;}
.aTable .bg3 {background-color: #004f7f; border-right: 1px solid #fff; color: #ffffff;  border-top-right-radius: 30px; border-bottom: 1px solid #fff}
.aTable .bg4 {background-color: #004d41; border-bottom-right-radius: 30px; border-top-right-radius: 30px; border-right: 1px solid #fff; color: #ffffff;}
.aTable .bg2 img {height: 60px;}
.aTable .bg3 img {height: 60px;}

.payroll {width: 33%; float: left; }
.payrollins { align-items: center; padding: 10px;}
.payborder {border-right: 1px solid #b0b0b0;}
.toppart {height: 100px; position: relative;}
.downpart {height: 80px; position: relative;}
.dect {position: absolute;
width: 100%;
  top: 50%;
  left: 50%; /* For horizontal centering */
  transform: translate(-50%, -50%); /* Adjusts for element's own size */}
.decd {  position: absolute;
width: 100%;	
  top: 50%;
  left: 50%; /* For horizontal centering */
  transform: translate(-50%, -50%); /* Adjusts for element's own size */}
.dbox {background-color: #d97408; border-radius: 10px; font-weight: bold; color: #fff; padding: 10px;}
.decd span {color:  #d97408; font-weight: bold;}

.vbox {background-color: #ffffff; box-shadow:0 0 10px rgba(0, 0, 0, 0.5); border-radius: 10px; padding: 4px; width: 350px; margin-top: 10px;}
.vhead {color: #0167b0; font-weight: bold; margin: 8px 0 0px; text-align: left;}
.vdec { text-align: left; padding: 5px;}
.vbox-area {padding:0px 10px 10px ;}

 @media screen and (max-width: 480px) { 
.vbox {background-color: #ffffff; box-shadow:0 0 10px rgba(0, 0, 0, 0.5); border-radius: 10px; padding: 4px; width: 100%; margin-top: 10px;}
	 }


 @media screen and (max-width: 680px) { 
.sbox3 {display: inline-block; padding:0px 15px; width: 50%;  cursor: pointer; margin-top: 30px;}
.headline02 {background: #3CA8E1;
background: linear-gradient(90deg, rgba(60, 168, 225, 0) 0%, rgba(60, 168, 225, 1) 12%, rgba(60, 168, 225, 1) 90%, rgba(60, 168, 225, 0) 100%); height: 2px; width: 300px; margin: 0 auto;}	 
	 }


 @media screen and (max-width: 550px) { 
.intro {margin-top: 20px;}
.sbox {display: inline-block; padding:0px 15px; width: 100%;  cursor: pointer; margin-top: 30px;}
.sbox3 {display: inline-block; padding:0px 15px; width: 100%;  cursor: pointer; margin-top: 30px;}
.aTable th { padding: 5px 10px; background-color: #fff;  border-bottom: 1px solid #0d6c29;  border-top: 1px solid #fff; border-right: 1px solid #fff; border-left: 1px solid #fff; }
.aTable td { padding: 5px; background-color: #fff;  border-right: 1px solid #fff; border-left: 1px solid #fff; text-align: center; }	 

.toppart {height: 200px; position: relative;}
.downpart {height: 120px; position: relative;}}

.new-blue{
color: #0066b3;
}