body{ padding: 0px; margin: 0px; list-style: none; color:#000;}
p{padding: 0px; margin: 0px;}
a{padding: 0px; margin: 0px; outline: none;}
ul{ list-style: none; padding: 0px; margin: 0px;}
label{ list-style: none; padding: 0px; margin: 0px;}
ul li{ padding: 0px; margin: 0px;}
h1, h2, h3, h4, h5, h6, p{padding: 0px 0 20px 0; margin: 0px;}
input[type="text"]::-webkit-placeholder { opacity: 1;  }
input[type="text"]::-moz-placeholder { opacity: 1;}
input[type="password"]::-webkit-placeholder { opacity: 1;}
input[type="password"]::-moz-placeholder { opacity: 1;}
input[type="search"]::-webkit-placeholder { opacity: 1;}
input[type="search"]::-moz-placeholder { opacity: 1;}
input[type="email"]::-webkit-placeholder { opacity: 1; }
input[type="email"]::-moz-placeholder { opacity: 1;}
input[type="tel"]::-webkit-placeholder { opacity: 1;}
input[type="tel"]::-moz-placeholder { opacity: 1;}
textarea::-moz-placeholder { opacity: 1;  }
textarea::-webkit-placeholder { opacity: 1;}
a:hover{ outline: none !important; text-decoration: none;}
a:active{ outline: none !important; text-decoration: none;}
a{ text-decoration: none !important;  -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
button, input[type="submit"]{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; cursor: pointer; -webkit-appearance: none; outline: none;}
input, button{ -webkit-appearance: none;}
input:focus, textarea:focus{ outline: none; box-shadow: none;}
button:focus, input[type="submit"]:focus{ outline: none; box-shadow: none;}
figure{ margin: 0px !important; padding: 0px;}
img{ max-width: 100%; object-fit:cover;}
a, span, strong, em{ display: inline-block;}
body{ font-family: 'Satoshi'; color:#272441; font-size: var(--font-20); line-height: var(--line-20);}



:root
{
    /* colors */
    --c-23: #040d23;
   	--c-41: #272441;
   	--c-66: #666666;
   	--c-33: #333333;
   	--c-ff: #fff;
   	--c-blue: #038df9;
   	--c-light: #f2f6f9;
   	--c-f4: #f0e7e7;
   	--c-c8: #b0bfc8;
   	
   	
   	--container: 1440px;
   	--container1: 1600px;
   	
    /* font-sizes */
    --font-80:80px;
    --line-80:89px;
    
    --font-65:65px;
    --line-65:75px;
    
    --font-50:50px;
    --line-50:59px;
    
    --font-40:40px;
    --line-40:49px;
    
    --font-45:45px;
    --line-45:55px;
    
    --font-30:30px;
    --line-30:39px;
    
    --font-28:28px;
    --line-28:39px;
    
    --font-25:25px;
    --line-25:35px;
    
    --font-22:22px;
    --line-22:30px;
    
    --font-20:20px;
    --line-20:28px;
    
    --font-18:18px;
    --line-18:26px;
    
    --font-17:17px;
    --line-17:25px;
    
    --font-16:16px;
    --line-16:20px;
    
    --font-14:14px;
    --line-14:18px;
    
}
.c23{ color: var(--c-23);}
.c41{ color: var(--c-41);}
.c66{ color: var(--c-66);}

.c23 p, .c23 li{ color: var(--c-66);}



/* Radial Out */
.hvr {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
  background: #e1e1e1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1eddb8;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr:hover, .hvr:focus, .hvr:active {
  color: white;
}
.hvr:hover:before, .hvr:focus:before, .hvr:active:before {
  -webkit-transform: scale(2);
  transform: scale(2);
}

.blueIn .hvr:before{ background: #fff;} 

.butns{ font-size: var(--font-16); line-height: var(--line-16); color: #fff; font-weight: 500; background:var(--c-23); line-height: 60px; text-align: center; padding: 0 30px; border-radius: 10px; color: var(--c-ff); font-family: 'Satoshi'; font-weight: 700;}

.font22{ font-size: var(--font-22); line-height: 65px;}
.font20{ font-size: var(--font-20); line-height: 65px;}
.font22 p{ font-size: var(--font-22); line-height: var(--line-22);}
.font20 p{ font-size: var(--font-20); line-height: var(--line-20);}
.font25 p strong, .font25 li{ font-size: var(--font-25); line-height: var(--line-25);}
.butns.font20{ font-weight: 500;}
.font25 p strong{ font-weight: 500;}
.font25 li{ background-position: top 7px left !important;}
.font17 p{ font-size: var(--font-17); line-height: var(--line-17);}
.font16 p{ font-size: var(--font-16); line-height: var(--line-16);}




h1{ font-size: var(--font-80); line-height: var(--line-80); font-weight: 800; }
h2{ font-size: var(--font-65); line-height: var(--line-65); font-weight: 800;}
h3{ font-size: var(--font-50); line-height: var(--line-50); font-weight: 800;}
h4{ font-size: var(--font-40); line-height: var(--line-40); font-weight: 800;}
h5{ font-size: var(--font-30); line-height: var(--line-30); font-weight: 800;}
h6{ font-size: var(--font-28); line-height: var(--line-28); font-weight: 400;}


h1, h2, h3, h4, h5, h6{ font-family: 'Plus-Jakarta-Sans'; text-transform: inherit !important; letter-spacing: inherit !important;}



p{ font-family: 'Satoshi';}

.overLink{ width: 100%; position: absolute; top: 0px; left: 0px; height: 100%;}



.container{ max-width: var(--container);}



.header_sec{ width: 100%; position: absolute; padding: 10px 0; top: 0px; left: 0px; z-index: 2;}
.navbar{ margin: 0px; padding: 0px; justify-content: space-between; align-items: center;}
.navbar-brand{ margin: 15px 0; padding: 0px; width: 180px;}
.menu_sec li{font-size: var(--font-18); line-height: var(--line-18); font-weight: 400; color: #000;}
.menu_sec li a{ color: #000;}

.bannersec{ background: #F6F7FA; padding: 200px 0 60px 0; position: relative;}
.bannersec h1 p{ font-size: inherit; padding-bottom: 0px;}
.bannersec p{ color: var(--c-66); font-size: var(--font-28); line-height: var(--line-28);}
.b1{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: url(../images/b1.png) no-repeat left center;}
.b2{ width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; background: url(../images/b2.png) no-repeat right top;}
.container{ position: relative;}

.bantabRow{ position: relative; min-height: 500px; display: flex; flex-wrap: wrap;}
.tabrowLft{ max-width: 70%;}
.tabrowRt{ width: 475px; position: absolute; border: 2px solid #fff; padding: 7px; border-radius: 20px;color: var(--c-66); top: 50%; right: 0px; transform: translateY(-50%);}
.tabrowRtIn{ width: 100%; background: #fff; border-radius: 10px; padding:24px 10px 10px; text-align: center;}
.tabrowRt p{  font-size: var(--font-18); line-height: var(--line-18); color: var(--c-23);}
.tabrowRtIn h5{ padding-bottom: 5px;}
.tabList{ margin: 0 -5px; margin-top:5px;}
.tabList li{ width: 33.333%; padding: 5px;}
.chk{ position: absolute; top:9px; right: 9px; font-size: 18px !important; opacity: 0; visibility: hidden;}
.tabList li.actv .chk{ opacity: 1; visibility: visible;}
.tabList li.actv .tabListBx{ background: #555555; color: #fff; border-color: #555555;}
.tabList li.actv i{ filter:brightness(0) invert(1);}
.tabListBx {
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  color: #909090;
  position: relative;
  font-size: var(--font-16);
  line-height: var(--font-16);
  min-height: 100px;
  padding: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.tabListBx span{ width: 100%; display: inline-block; font-weight: 500;}
.tabListBx i{ font-size: 25px; margin-bottom: 15px;}
.icns{ width: 25px;}

.tabrowRtIn .butns { width: 100%;}

.tabconpic{ width: 100%; display: none;}
.actva{ display: none;}



.logosSec{ width: 100%; padding: 50px 0; position: relative;}
.logosSec:before{ width: 100%; height: 25%; position: absolute; top: 0px; left: 0px; background: linear-gradient(180deg, rgba(246, 247, 250, 1) 10%, rgba(255, 255, 255, 0.97) 100%); content: "";}
.logosSec .container{ max-width: var(--container1);}
.logosSec h6{ font-size: var(--font-22) !important; line-height: var(--line-22) !important; color: #666666; font-family: 'Satoshi';  font-weight: 700 !important;}
.logosSec h6 strong{ font-weight: 700; color: #040d23;}

.logoI {
  display: flex;
  height: 140px;
  justify-content: center;
  align-items: center;
}
.logoI img{ max-width: 100% !important; width: auto !important;}


.workSec .row{ margin: 0 -20px;}
.workSec .col-md-6{ padding: 0 20px;}
.ligtBox{ background: #f8f8f8; box-shadow: 1px 1px 1px 1px #e5e5e5; overflow: hidden;}
.ligtBox, .drkBox{ padding: 45px; border-radius: 30px; position: relative; height: 100%;}
.ligtBox{ color: var(--c-23);}
.drkBox{ color: var(--c-ff); background: #050d24; overflow: hidden;}
.drkBox .butns{ background: #fff; color: #040d23; padding: 0 44px; font-weight: 800;}





.listUl li{ list-style: disc;}
.listUl ul{ padding: 0 0 15px 20px;}


.roundL{ width: 466px; height: 466px; position: relative; margin: 40px auto 0;}
.r1{ width: 100%; height: 100%; border: 3px dotted #b1b1b1; position: absolute; top: 0px; left: 0px; border-radius: 100%;}
.r2{ width: 72%; height: 72%; border: 3px dotted #b1b1b1; position: absolute; top: 50%; left: 50%; border-radius: 100%; transform: translate(-50%, -50%);}
.r3{ width: 38%; height: 38%; border: 3px dotted #b1b1b1; position: absolute; top: 50%; left: 50%; border-radius: 100%; transform: translate(-50%, -50%);}
.incs{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}

:root
{
--he1:109px;
--he2:107px;
--he3:91px;
--he4:98px;
--he7:73px;
--he10:88px;


}

.ic{ display: flex; position: absolute;}
.ic .licn{  border: 3px solid #e5e5e5; background: #fff; border-radius: 11px;  box-shadow: 0px 0px 11px 3px #e5e5e5;}

.ic2 .licn{  background: #1384c6; border-color:#1384c6; }
.ic9 .licn{   background: #0062fe; border-color:#0062fe; }

.ic1{ left: 35%; top: -31px; transform: rotate(-10deg);  width: var(--he1); height: var(--he1);}
.ic2{right: 58px;
  top: 69px; transform: rotate(-10deg); width: var(--he2); height: var(--he2);}
  
  
  
.ic3 {
  right: 15px;
  top: 194px;
  transform: rotate(5deg);
  width: var(--he3);
  height: var(--he3);
}
.ic sup{ width: 30px; height: 30px; background: #ff0161; position: absolute; top: -9px; right: -9px; border-radius: 100%; font-family: 'Plus-Jakarta-Sans'; font-size: 20px; color: #fff; text-transform: uppercase; font-weight: 700;display: flex;
  align-items: center;
  justify-content: center; transform: rotate(5deg);}

.ic4 {
  right: 111px;
  top: 226px;
  transform: rotate(5deg);
  width: var(--he3);
  height: var(--he3);
}
.ic4 sup, .ic9 sup{ right: inherit; left: -9px; transform: rotate(-5deg);}

.ic5 {
  left: 30px;
  top: 83px;
  transform: rotate(-12deg);
  width: var(--he4);
  height: var(--he4);
}
.ic6 {
 left: 25%;
  top: 140px;
  transform: rotate(-12deg);
  width: var(--he4);
  height: var(--he4); /*border-color: #22e7b2; box-shadow: 0px 0px 11px 3px rgba(34, 231, 178, 0.3);*/
}
.ic6 sup{ background: #ff7c01;}
.ic7 {
  left: 30px;
  top: 50%;
  transform: rotate(8deg);
  width: var(--he7);
  height: var(--he7);
}

.ic8 {
 left: 124px;
  bottom: 94px;
  transform: rotate(-12deg);
  width: var(--he4);
  height: var(--he4);z-index: 1;
}
.ic9 {
  left: 63px;
  bottom: -1px;
  transform: rotate(-12deg);
  width: var(--he4);
  height: var(--he4);
}
.ic10 {
  right: 144px;
  bottom: 42px;
  transform: rotate(5deg);
  width: var(--he10);
  height: var(--he10);
}

.shG {
  width: 555px;
  height: 400px;
  position: absolute;
  top: -52px;
  right: -179px;
  background: url(../images/sh.png) no-repeat top right;
  background-size: 100% 100%;
}


.ic .licn{
  opacity: 0;
  transform: scale(0.6);
  animation: showsA 14s ease-in-out infinite;
}

@keyframes shows {
    0% { opacity: 0; transform: scale(0.8); }
  10% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}
.ic sup{
  opacity: 0;
  transform: scale(0.6);
  animation: shows 12s ease-in-out infinite;
}



/* === Updated Animation with Glow === */
@keyframes showsA {
  0% {
    opacity: 0;
    transform: scale(0.8);
    border-color: transparent;
    box-shadow: 0px 0px 0px rgba(34, 231, 178, 0);
  }
  10% {
    opacity: 1;
    transform: scale(1);
    border-color: #22e7b2;
    box-shadow: 0px 0px 11px 3px rgba(34, 231, 178, 0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1);
    border-color: #22e7b2;
    box-shadow: 0px 0px 16px 6px rgba(34, 231, 178, 0.4);
  }
  90% {
    opacity: 1;
    transform: scale(1);
    border-color: #22e7b2;
    box-shadow: 0px 0px 11px 3px rgba(34, 231, 178, 0.3);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
    border-color: transparent;
    box-shadow: 0px 0px 0px rgba(34, 231, 178, 0);
  }
}









/* === Sequential delays for icons === */
.ic1 .licn { animation-delay: 2s; }
.ic2 .licn { animation-delay: 3.8s; }
.ic3 .licn { animation-delay: 4.6s; }
.ic4 .licn { animation-delay: 5.4s; }
.ic5 .licn { animation-delay: 6.2s; }
.ic6 .licn { animation-delay: 7.1s; }
.ic7 .licn { animation-delay: 8.8s; }
.ic8 .licn { animation-delay: 9.8s; }
.ic9 .licn { animation-delay: 10.8s; }
.ic10 .licn { animation-delay: 11.6s; }

/* === Sup (notification) delays slightly after image === */
.ic1 sup { animation-delay: 2.6s; }
.ic2 sup { animation-delay: 3.4s; }
.ic3 sup { animation-delay: 4.2s; }
.ic4 sup { animation-delay: 5s; }
.ic5 sup { animation-delay: 6.8s; }
.ic6 sup { animation-delay: 7.6s; }
.ic7 sup { animation-delay: 8.4s; }
.ic8 sup { animation-delay: 9.4s; }
.ic9 sup { animation-delay: 10.4s; }
.ic10 sup { animation-delay: 11.2s; }




/* === Base Styles === */
.ic .licn, .ic sup {
  opacity: 0;
  transform: scale(0.7);
  animation: appearDisappear 6s ease-in-out infinite;
}

/* === MAIN ANIMATION === */
@keyframes appearDisappear {
  0%, 4% {
    opacity: 0;
    transform: scale(0.7);
    box-shadow: none;
  }
  10%, 60% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 10px 3px rgba(34, 231, 178, 0.3);
  }
  70%, 100% {
    opacity: 0;
    transform: scale(0.9);
    box-shadow: none;
  }
}

/* === SEQUENTIAL SHOW (1 → 10) — Faster === */
/* Each appears 0.5s after previous */
.ic1 .licn, .ic1 sup { animation-delay: 0s; }
.ic2 .licn, .ic2 sup { animation-delay: 0.5s; }
.ic3 .licn, .ic3 sup { animation-delay: 1s; }
.ic4 .licn, .ic4 sup { animation-delay: 1.5s; }
.ic5 .licn, .ic5 sup { animation-delay: 2s; }
.ic6 .licn, .ic6 sup { animation-delay: 2.5s; }
.ic7 .licn, .ic7 sup { animation-delay: 3s; }
.ic8 .licn, .ic8 sup { animation-delay: 3.5s; }
.ic9 .licn, .ic9 sup { animation-delay: 4s; }
.ic10 .licn, .ic10 sup { animation-delay: 4.5s; }

/* === R1 / R2 / R3 — Faster Version === */
.r1, .r2, .r3 {
  opacity: 0;
  animation: appearHide 12s ease-in-out infinite;
}

.r1 { animation-delay: 0s; }
.r2 { animation-delay: 0.4s; }
.r3 { animation-delay: 0.8s; }

@keyframes appearHide {
  0%, 5%   { opacity: 0; }
  20%, 70% { opacity: 1; }
  100%     { opacity: 0; }
}













.roundR{ width: 490px; height: 490px; position: relative; margin: 40px auto 0;}
.roundR img{ width: 100%;}
.cenLogo{ max-width: 106px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.ruBtns{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.ruBtns li{ display: inline-block; position: absolute;}
.bluBtn{ min-width: 150px; padding: 0 20px; background: #0188fd; line-height: 60px; text-align: center; color: #fff !important; font-size: var(--font-22); font-family: 'Plus-Jakarta-Sans'; font-weight: 700; border-radius: 50px; box-shadow: 0px 0px 11px 5px rgba(255,255,255,0.1); cursor: inherit;}


.la1 .bluBtn{  box-shadow: 0px 0px 11px 5px rgba(255,255,255,0.4);}
.la1{ left: 50%;  transform: translateX(-50%); top: 0px;}
.la2{ left: -20px; top: 25%;}
.la3{ right: -20px; top: 25%;}

.la6{ left: 50%;  transform: translateX(-50%); bottom: 0px;}
.la4{ left: -20px; bottom: 25%;}
.la5{ right: -20px; bottom: 25%;}



.tophead{ width: 100%; padding: 110px 0;}
.tophead h6{ color: var(--c-blue);}

.flowLst{ width: 100%; padding: 40px 0; max-width: 290px;}
.flowLst li{ width: 100%; padding: 20px 0; font-family: 'Plus-Jakarta-Sans'; font-weight: 400; font-size: var(--font-22);  line-height: var(--line-22); }
.flowLst li a{ color: #333333; }
.flowLst li strong{ color: #999999; font-weight: 800; width: 100%; display: inline-block;  font-size: var(--font-25);  line-height: var(--line-25);}
.flowLst li a{ border-left: 1px solid #999; padding-left: 30px; min-height: 80px;padding-top: 10px;
  padding-bottom: 10px; width: 100%; display: flex; align-items: center; flex-wrap: wrap;}
.flowRow{ text-align: left;}
.flowLst li p{ display: none; padding-bottom: 0px; color: #333333; margin-top: 10px;}
.flowPic{ padding: 5px; border-radius: 10px; border: 1px solid #10b1d4; position: relative; display: none;}

.videoBtn {
  background: #2d30ff;
  display: flex;
  width: 230px;
  line-height: 62px;
  font-size: var(--font-18);
  font-weight: 800;
  font-family: 'Plus-Jakarta-Sans';
  text-align: center;
  color: #fff !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  border-radius: 40px;
}

.videoBtn i{ margin-right: 9px;}
.flowLst li.actv p{ display: block;}
.flowLst li.actv strong{ color: #2d30ff;}
.flowLst li.actv a{ border-color: #2d30ff;}





.fetureSec .container{ max-width: 1800px;}
.fetureSec { position: relative;}
.fetureSec:before{ width: 100%; height: 100%; position: absolute; bottom: 0px; left: 0px;content: ""; background: url(../images/b3.png) no-repeat center center;background-size: 100%;}
.fetureSec, .howworkSec{ background: var(--c-light); }
.fetuRow{ width: 100%; display: flex; margin-top: 49px; flex-wrap: wrap; position: relative;}
.felist1{ width: 25%; display: flex; flex-wrap:wrap;}
.whBox {transition: all 0.5s ease-in-out;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 0px 1px 2px rgba(229, 229, 229, 0.5);
  height: 173px;
  display: flex;
  align-items: center;
  justify-content: center; position: relative;
}
.libx{ padding: 8px;}
.felist2{ width: 50%; display: flex; flex-wrap:wrap;}

.whBoxB{ height: 366px;}

.felist4{ display: flex; width: 75%; margin: 0px auto;}.felist4 .w-50{ width: 16.66666667% !important;}
.whBox:hover{ box-shadow: 0px 0px 19px 3px rgba(29, 201, 212, 0.3);}
.whBoxRa{ width: 100%; position: relative;}
.shq{width: 100%;
  height: 100%;
  /*border: double 1px transparent;*/
  border-radius: 22px;
  /*background-image:
  linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)),
  linear-gradient(to right, rgba(54, 52, 224, 0.8), rgba(26, 210, 193, 0.8));*/
  
 background: linear-gradient(135deg, hsla(241, 74%, 54%, 1) 0%, hsla(0, 0%, 100%, 1) 50%, hsla(174, 78%, 46%, 1) 100%); 
  
  
  background-origin: border-box;
  background-clip: content-box, border-box; content: ""; position: absolute; top: -2px; transition: all 0.5s ease-in-out;
  left: -2px; opacity: 0;}
.whBoxRa:hover .shq{ opacity: 1;}

.fsh1{background: linear-gradient(90deg,rgba(242, 246, 249, 0) 0%, rgba(242, 246, 249, 1) 98%); content: ""; position: absolute; top: 0px; right: 0px; width: 12%; height: 100%; z-index: 1;}

.fsh2{ background: linear-gradient(90deg,rgba(242, 246, 249, 1) 0%, rgba(242, 246, 249, 0.1) 50%); content: ""; position: absolute; top: 0px; left: 0px; width: 12%; height: 100%; z-index: 1;}

.fsh3{ background: linear-gradient(360deg,rgba(242, 246, 249, 1) 0%, rgba(242, 246, 249, 0.12) 50%); content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 19%; z-index: 1;}


.p25 p{ font-size: var(--font-25); line-height: var(--line-25); font-weight: 500;}



.testeBox{ width: 100%; border-radius: 30px; overflow: hidden; position: relative; text-align: left;}
.testeBox:after{ background: linear-gradient(360deg,rgb(32, 31, 31) 0%, rgba(255, 255, 255, 0) 100%); width: 100%; height: 60%; bottom: 0px; left: 0px; content: ""; position: absolute;}
.tTxt{ width: 100%; position: absolute; bottom: 0px; left: 0px; padding: 30px; color: #fff; z-index: 1;}
.tTxt p{ font-style: italic; font-weight: 500; }
.tTxt strong{ display: block; font-weight: 700; font-size: var(--font-22);}
.tTxt span{ display: block; font-weight: 400; font-size: var(--font-16);}


.howRow{ margin-left: -25px; margin-right: -25px; margin-top: 50px;}
.howRow .col-md-3{ padding: 0 25px;}

.howBox{ width: 100%; position: relative; overflow: hidden; border-radius: 25px; background: #fff;}


.howBox{
  transition: all 0.5s ease-in-out;
  background: #fff;
  border-radius: 29px;
  overflow: hidden;
  box-shadow: 0px 0px 22px 6px rgba(229, 229, 229, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/*.howBox:hover {
  box-shadow: 0px 0px 19px 3px rgba(29, 201, 212, 0.3);
}*/


.howRow .shq{ border-radius: 28px;}

.howRow .whBoxRa::before {
  width: 51px;
  height: 18px;
  background: url(../images/n1.png) no-repeat center center;
  position: absolute;
  top: 50%;
  right: -45px;
  content: "";
  z-index: 1;
}
.howRow .col-md-3:nth-child(2) .whBoxRa::before{ background: url(../images/n2.png) no-repeat center center;}
.howRow .col-md-3:last-child .whBoxRa::before{ display: none;}

.hitgrundSec{ padding: 80px 0 30px;}

.dashLIst {
  border: 1px solid var(--c-f4);
  padding: 5px;
  border-radius: 12px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 660px;
  margin: 21px auto 0;justify-content: space-between;
}
.dashLIst li{ display: inline-block;}
.dashLIst li a{ padding: 0 50px; border-radius: 11px; color: #040d23; font-weight: 500; line-height: 54px;}
.dashLIst li.actv a{ font-weight: 700; color: #fff; background: #201f1f;}

.dashcontBox{ display: none; width: 100%;}




.dashcont{ max-width: 1180px; margin: 40px auto 0; border: 1px solid var(--c-f4); border-radius: 0 30px 0 30px; overflow: hidden; box-shadow:0px 0px 21px 17px rgba(241,241,241,0.9); min-height: 400px;}

.deskLft, .deskRt{ padding: 70px 48px; text-align: left;}
.deskRt{ background: #edf8f8;}
.deskLft{ position: relative;}
.deskLft:before{ width: 100%; height: 100%; position: absolute; bottom: 0px; left: 0px; background: url(../images/sha.png) no-repeat left bottom; content: ""; z-index: -1;}
.deskLft h6{ color: #201f1f; font-weight: 700;}
.listtk li {
  font-weight: 500;
  background: url(../images/tk.png) no-repeat left top 5px;
  padding-left: 26px;
  margin-bottom: 14px;
}

.midiaUser i{ width: 80px; height: 80px; border-radius: 100%; overflow: hidden; display: flex; margin-right: 15px;}
.midiaUser i img{ width: 100%; height: 100%;}
.midiaUser strong{ font-weight: 700; color: #201f1f; font-size: 25px;}
.midiaUser p{ font-weight: 400; color: #201f1f; font-size: 17px; padding-bottom: 0px;}
.midiaUser{ align-items: center; margin-bottom: 31px;}

.midiaUserrow{ color: #201f1f;}
.midiaUserrow h5{ font-style: italic; font-weight: 700;}
.midiaUserrow p{  font-size: var(--font-18); line-height: var(--line-18); font-style: italic; font-weight:500;}
.sts{ display: block; margin: 6px 0;}

.multlogo{ width: 100%; position: relative; overflow: hidden; border-radius: 20px;}
.w2{ position: absolute; top: 0px; left: 0px;}


.hitgrundRow{ align-items: center; flex-direction: row-reverse; margin-top: 30px;}
.hitgrundRow .rtTxt{ padding-right: 111px;}


.blueSec{ width: 100%; padding: 40px 0 75px;}
.blueIn{ background: var(--c-23); position: relative; padding: 110px; text-align: center; color: #fff; border-radius: 0 30px 0 30px; overflow: hidden; box-shadow: 0px 0px 19px 2px rgba(229, 229, 229, 0.7);}
.lIcon{ display: inline-block; margin-bottom: 20px;}
.blueIn .butns{ background: #1eddb8; color:var(--c-23); }
.bl1{ width: 100%; height: 100%; position: absolute; top: -115px; left: -23px; background: url(../images/b1a.png) no-repeat top left;}
.bl2{ width: 100%; height: 100%; position: absolute;bottom: -25px; right: -23px; background: url(../images/b2a.png) no-repeat bottom right;}




.footIfo{ width: 100%; border-bottom: 1px solid #e4e4e4; border-top: 1px solid #e4e4e4; padding: 14px 0; color: #040d23;}
.extrs{ font-family: 'Plus-Jakarta-Sans'; font-weight: 700; font-size: var(--font-25);}
.footIfo li{ display: flex; color: #040d23; font-weight: 400;   align-items: center;}
.footIfo li img{ margin-right: 10px; object-fit: inherit !important;}
.footIfo li a{ color: #040d23; }
.footIfo ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}


.footMain{background: url(../images/f2.png) no-repeat top right, url(../images/f1.png) no-repeat bottom left #f3f6f8;}
.footTop{ padding: 50px 0 35px; width: 100%; }

.footTop h5{  font-family: 'Satoshi'; color: #333; font-weight: 700; font-size: var(--font-22); line-height: var(--line-22);}
.footTop p{  color: #333;}
.footTop p a{  color: #333; text-decoration: underline !important;}


.mw-70{ max-width: 70%;}
.footLogo{ max-width: 173px; margin-bottom: 30px;}
.footBox p a{ font-weight: 700;}

.contInfo li{ color: #444444; font-weight: 600;font-family: 'Inter'; margin-bottom: 10px;}
.contInfo li a{ color: #444444;}
.contInfo li a:hover{ color: #1eddb8;}

.footsos{ margin-top: 20px;}
.footsos li{ display: inline-block; color: #444444; font-size:24px; margin-right: 10px;}
.footsos li a{ color: #444444;}
.footsos li a:hover{ color: #1eddb8;}


.footBottm{ padding: 10px 0; text-align: center;}
.footBottm p{ color: #424b5d; font-size: var(--font-20); line-height: var(--line-20); padding-bottom: 0px;}





.intregrtSec { width: 100%; overflow: hidden;}
.intregrtRow{ width: 100%; position: relative; display: inline-block;}
.intreLft{ position: relative;}
.bt1 {
  background: url(../images/bt1.png) no-repeat center center;
min-width: 1070px;
  position: absolute;
  top: -188px;
  left: -83px;
  height: 100%;
  background-size: 100% 100%;
  min-height: 1119px;
}

.bt2 {
  background: url(../images/bt2.png) no-repeat center center;
    background-size: auto;
  width: 100%;
  position: absolute;
  top: -100px;
  left: -219px;
  height: 100%;
  background-size: 100% 100%;
  min-height: 751px;
}


.intrePic img{ max-width: 100%; object-fit: inherit;}
.intrePic{ max-width: 700px; position: relative;}
.runfdLogo{ width: 144px; height: 144px; background: url(../images/rua.png) no-repeat center center; position: absolute; top: 50%; left: 50%;display: flex;
  align-items: center;
  justify-content: center; transform: translate(-50%, -50%);top: 40%;
  left: 47.7%; border-radius: 100%; box-shadow: 0px 0px 19px 3px rgba(29, 201, 212, 0.3);}


.intregrtRow h4{ font-size: var(--font-45); line-height: var(--line-45); }



/*.ruPic{ opacity: 0;
  transform: scale(0.8);
  animation: showImage 5s ease-in-out infinite;  animation-delay: 1.1s;}

@keyframes showImage {
  0%, 10% { opacity: 0; transform: scale(0.8); }
  15%, 40% { opacity: 1; transform: scale(1); }
  45%, 100% { opacity: 0; transform: scale(0.9); }
}

.cenLogo img{
opacity: 0;
  animation: showLogo 5s ease-in-out infinite;
  animation-delay: 1.6s;
}


@keyframes showLogo {
  0%, 10% { opacity: 0; transform: scale(0.8); }
  15%, 40% { opacity: 1; transform: scale(1); }
  45%, 100% { opacity: 0; transform: scale(0.9); }
}




.ruBtns li .bluBtn{  opacity: 0;
  transform: scale(0.8);
  animation: showBtn 5s ease-in-out infinite;  animation-delay: 1.9s;}


.la1 .bluBtn{transform:scale(0.8); animation-delay: 2.6s; }
.la2 .bluBtn{ animation-delay: 3.4s; }
.la3 .bluBtn{ animation-delay: 4.2s; }
.la4 .bluBtn{ animation-delay: 5s; }
.la5 .bluBtn{ animation-delay: 5.8s; }
.la6 .bluBtn{ transform: scale(0.8); animation-delay: 6.6s; }

@keyframes showBtn {
  0%, 10% { opacity: 0; transform: scale(0.8); }
  15%, 40% { opacity: 1; transform: scale(1); }
  45%, 100% { opacity: 0; transform: scale(0.9); }
}*/



/*.ruPic {
  opacity: 0;
  transform: scale(0.8) rotate(0deg);
  animation: showImage 10s ease-in-out infinite;
  animation-delay: 1.1s;
}


@keyframes showImage {
  0% { opacity: 0; transform: scale(0.8) rotate(0deg); }
  10% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
  90% { opacity: 1; transform: scale(1) rotate(360deg); }
  100% { opacity: 0; transform: scale(0.9) rotate(360deg); }
}

.cenLogo img {
  opacity: 0;
  transform: scale(0.8);
  animation: showLogo 10s ease-in-out infinite;
  animation-delay: 1.6s;
}

@keyframes showLogo {
  0%, 10% { opacity: 0; transform: scale(0.8); }
  15%, 60% { opacity: 1; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(0.9); }
}


.ruBtns li .bluBtn {
  opacity: 0;
  transform: scale(0.8);
  animation: showBtn 10s ease-in-out infinite;
  animation-delay: 1.9s;
}

.la1 .bluBtn { transform: scale(0.8); animation-delay: 2.6s; }
.la2 .bluBtn { animation-delay: 3.4s; }
.la3 .bluBtn { animation-delay: 4.2s; }
.la4 .bluBtn { animation-delay: 5s; }
.la5 .bluBtn { animation-delay: 5.8s; }
.la6 .bluBtn { transform: scale(0.8); animation-delay: 6.6s; }

@keyframes showBtn {
  0%, 10% { opacity: 0; transform: scale(0.8); }
  15%, 70% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(0.9); }
}*/





/* ==== Round Image ==== */





/*.ruPic {
  opacity: 0;
  transform: scale(0.8) rotate(0deg);
  animation: showImage 12s ease-in-out infinite;
  animation-delay: 1.1s;
}


@keyframes showImage {
  0% { opacity: 0; transform: scale(0.8) rotate(0deg); }
  10% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
  90% { opacity: 1; transform: scale(1) rotate(360deg); }
  100% { opacity: 0; transform: scale(0.9) rotate(360deg); }
}



.cenLogo img {
  opacity: 0;
  animation: showLogo 12s ease-in-out infinite;
  animation-delay: 2s; 
}

@keyframes showLogo {
  0%, 25% { opacity: 0; transform: scale(0.8); }
  30%, 50% { opacity: 1; transform: scale(1); }
  55%, 100% { opacity: 0; transform: scale(0.9); }
}


.ruBtns li .bluBtn {
  opacity: 0;
  transform: scale(0.8);
  animation: showBtn 12s ease-in-out infinite;
}

.la1 .bluBtn { animation-delay: 6s; }
.la2 .bluBtn { animation-delay: 6.8s; }
.la3 .bluBtn { animation-delay: 7.6s; }
.la4 .bluBtn { animation-delay: 8.4s; }
.la5 .bluBtn { animation-delay: 9.2s; }
.la6 .bluBtn { animation-delay: 10s; }

@keyframes showBtn {
  0%, 50% { opacity: 0; transform: scale(0.8); }
  55%, 70% { opacity: 1; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(0.9); }
}


.ruPic img {
  animation: rotateCircle 12s linear infinite;
  animation-delay: 2s;
}

@keyframes rotateCircle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}*/








/* ==== ROUND IMAGE ==== */
.ruPic {
  opacity: 0;
  transform: scale(0.8);
  animation: showImage 8s ease-in-out infinite;
}

@keyframes showImage {
  0% { opacity: 0; transform: scale(0.8) rotate(0deg); }
  10% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
  90% { opacity: 1; transform: scale(1) rotate(360deg); }
  100% { opacity: 0; transform: scale(0.9) rotate(360deg); }
}

/* Continuous rotation */
.ruPic img {
  animation: rotateCircle 8s linear infinite;
  animation-delay: 1s;
}

@keyframes rotateCircle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==== CENTER LOGO ==== */
.cenLogo img {
  opacity: 0;
  animation: showLogo 8s ease-in-out infinite;
  animation-delay: 1.5s;
}

@keyframes showLogo {
  0%, 10%   { opacity: 0; transform: scale(0.8); }
  15%, 75%  { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(0.9); }
}

/* ==== BUTTONS ==== */
.ruBtns li .bluBtn {
  opacity: 0;
  transform: scale(0.8);
  animation: showBtn 8s ease-in-out infinite;
}


/* Sequential button delays */
.la1 .bluBtn { animation-delay: 7s; }
.la2 .bluBtn { animation-delay: 7.8s; }
.la3 .bluBtn { animation-delay: 8.6s; }
.la4 .bluBtn { animation-delay: 9.4s; }
.la5 .bluBtn { animation-delay: 10.2s; }
.la6 .bluBtn { animation-delay: 11s; }

@keyframes showBtn {
  0%, 50% { opacity: 0; transform: scale(0.8); }
  55%, 85% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(0.9); }
}



/*.runfdLogo{ animation: glowPulse 2s ease-in-out infinite;}*/
.runfdLogo img{ transition: transform 0.5s ease-in-out;
  animation: zoomInOut 2s ease-in-out infinite;}



/* Continuous shadow animation */
@keyframes glowPulse {
  0% {
    box-shadow: 0px 0px 10px 2px rgba(29, 201, 212, 0.2);
  }
  50% {
    box-shadow: 0px 0px 25px 6px rgba(29, 201, 212, 0.8);
  }
  100% {
    box-shadow: 0px 0px 10px 2px rgba(29, 201, 212, 0.2);
  }
}

/* Continuous zoom in / out animation */
@keyframes zoomInOut {
  0% {
    transform: scale(0.7);
  }
  50% {
    transform: scale(1.1); /* Zoom in */
  }
  100% {
    transform: scale(0.7); /* Zoom out */
  }
}


.fetuRow{ background: #f2f6f9;

/* Apply gradient masks for left-right and bottom sides */
-webkit-mask-image: 
  linear-gradient(90deg, transparent 2%, rgb(217,217,217) 10%, rgb(217,217,217) 90%, transparent 98%), /* left & right */
  linear-gradient(0deg, transparent 0%, rgb(217,217,217) 15%, rgb(217,217,217) 100%); /* bottom fade */
mask-image: 
  linear-gradient(90deg, transparent 2%, rgb(217,217,217) 10%, rgb(217,217,217) 90%, transparent 98%),
  linear-gradient(0deg, transparent 0%, rgb(217,217,217) 15%, rgb(217,217,217) 100%);

/* Combine both gradients */
-webkit-mask-composite: source-in, xor;
mask-composite: intersect;

}


.fsh1, .fsh2{ display: none;}


.felist2 .shq {
  background: #fff;
  box-shadow: 0 0 10px rgba(26, 210, 193, 0.1), 0 0 10px rgba(26, 210, 193, 0.1);
}

/*.howRow .shq {
  opacity: 0;
  animation: pulseFade 16s ease-in-out infinite;
}

@keyframes pulseFade {
  0%, 20% { opacity: 1; }
  25%, 100% { opacity: 0; }
}


.howRow .col-md-3:nth-child(1) .shq { animation-delay: 0s; }
.howRow .col-md-3:nth-child(2) .shq { animation-delay: 4s; }
.howRow .col-md-3:nth-child(3) .shq { animation-delay: 8s; }
.howRow .col-md-3:nth-child(4) .shq { animation-delay: 12s; }


.howRow .howBox {
  transition: box-shadow 0.4s ease;
  animation: boxGlow 16s ease-in-out infinite;
}

@keyframes boxGlow {
  0%, 20% {
    box-shadow: 0 0 25px 5px rgba(29, 201, 212, 0.6);
  }
  25%, 100% {
    box-shadow: none;
  }
}

.howRow .col-md-3:nth-child(1) .howBox { animation-delay: 0s; }
.howRow .col-md-3:nth-child(2) .howBox { animation-delay: 4s; }
.howRow .col-md-3:nth-child(3) .howBox { animation-delay: 8s; }
.howRow .col-md-3:nth-child(4) .howBox { animation-delay: 12s; }*/







.howRow .shq {
  opacity: 0;
  animation: pulseFade 8s ease-in-out infinite;
}

@keyframes pulseFade {
  0%, 20% { opacity: 1; }
  25%, 100% { opacity: 0; }
}

/* Step-by-step timing */
.howRow .col-md-3:nth-child(1) .shq { animation-delay: 0s; }
.howRow .col-md-3:nth-child(2) .shq { animation-delay: 2s; }
.howRow .col-md-3:nth-child(3) .shq { animation-delay: 4s; }
.howRow .col-md-3:nth-child(4) .shq { animation-delay: 6s; }

/* Matching glow animation */
.howRow .howBox {
  transition: box-shadow 0.3s ease;
  animation: boxGlow 8s ease-in-out infinite;
}

@keyframes boxGlow {
  0%, 20% {
    box-shadow: 0 0 25px 5px rgba(29, 201, 212, 0.6);
  }
  25%, 100% {
    box-shadow: none;
  }
}

/* Match timing with shq */
.howRow .col-md-3:nth-child(1) .howBox { animation-delay: 0s; }
.howRow .col-md-3:nth-child(2) .howBox { animation-delay: 2s; }
.howRow .col-md-3:nth-child(3) .howBox { animation-delay: 4s; }
.howRow .col-md-3:nth-child(4) .howBox { animation-delay: 6s; }















.w2{ transform-origin: center;
  animation: zoomInOut 3s ease-in-out infinite;}

@keyframes zoomInOut {
  0%, 100% {
    transform: scale(0.87);
  }
  50% {
    transform: scale(1.1); /* zoom in */
  }
}


.bl1, .bl2{ 
  animation: floatZoom 4s ease-in-out infinite;}
@keyframes floatZoom {
0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(10px, 10px) scale(1.1);
  }
}

.deskLft::before { animation: floatMove 8s ease-in-out infinite;}

@keyframes floatMove {
 0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(10px, 10px) scale(1.2);
  }
}



.intrePic{ position: relative;}
.inS {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  display: flex;
  align-items: center;
}
.inS li a{ width: 49px; height: 52px; background: #fff; border-radius: 10px; box-shadow: 0px 0px 19px 3px rgba(29, 201, 212, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  /*animation: glowIcon 3s ease-in-out infinite;*/}
.inS li a img{ transition: transform 0.5s ease-in-out;
  animation: zoomInOut 2s ease-in-out infinite;}
  
  
.inS li{ margin-bottom: 16px;}
.inS li:last-child{ margin-bottom: 0px;}
.brdl{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}


.inS li {
  margin-bottom: 23px;
}
.inS{ left: 8px;}

/* === Continuous glowing shadow animation === */
@keyframes glowIcon {
  0%, 100% {
    box-shadow: 0px 0px 8px 2px rgba(29, 201, 212, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0px 0px 22px 5px rgba(29, 201, 212, 0.6);
    transform: scale(1.05);
  }
}



.footIfo li, .contInfo li, .footBottm p{ font-size: var(--font-16); line-height: var(--line-16);}














  
  
@media (min-width: 992px) and (max-width: 9000px) {
.nav_top .dropdown .dropdown-menu { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s;
    -o-transition: all 0.3s;transition: all 0.3s; max-height: 0; display: block; opacity: 0; visibility: hidden;  margin:0px; border: none; border-bottom: 2px solid #ccc; 
    background:#fff !important;
    width: 150px; padding: 0px;
   border-radius: 0; left: 0; right: inherit; padding: 5px 8px 8px; box-shadow: inherit; }

.nav_top .dropdown:hover .dropdown-menu { max-height: 300px;opacity: 1; visibility: visible; /*transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;*/}






}


@media only screen and (max-width: 1799px) {


:root
{
	--container: 1440px ;
   
   	--container1: 1600px;
   	
    /* font-sizes */
    --font-80:70px;
    --line-80:79px;
    
    --font-65:60px;
    --line-65:70px;
    
    --font-50:45px;
    --line-50:55px;
    
    --font-40:35px;
    --line-40:43px;
    
    --font-45:40px;
    --line-45:50px;
    
    --font-30:28px;
    --line-30:36px;
    
    --font-28:25px;
    --line-28:35px;
    
    --font-25:21px;
    --line-25:31px;
    
    --font-22:19px;
    --line-22:29px;
    
    --font-20:18px;
    --line-20:26px;
    
    --font-18:17px;
    --line-18:26px;
    
    --font-17:16px;
    --line-17:25px;
    
    --font-16:15px;
    --line-16:20px;
    
    --font-14:14px;
    --line-14:18px;
    
}


.navbar-brand{ width: 167px;}






}


@media only screen and (max-width: 1599px) {
:root
{
--he1:90px;
--he2:90px;
--he3:81px;
--he4:88px;
--he7:63px;
--he10:78px;


}
:root
{
	--container: 1350px;	
	--container1: 1400px;
   	
    /* font-sizes */
    --font-80:60px;
    --line-80:70px;
    
    --font-65:50px;
    --line-65:60px;
    
    --font-50:45px;
    --line-50:55px;
    
    --font-40:35px;
    --line-40:43px;
    
    --font-45:40px;
    --line-45:50px;
    
    --font-30:28px;
    --line-30:36px;
    
    --font-28:25px;
    --line-28:35px;
    
    --font-25:21px;
    --line-25:31px;
    
    --font-22:19px;
    --line-22:29px;
    
    --font-20:18px;
    --line-20:26px;
    
    --font-18:17px;
    --line-18:26px;
    
    --font-17:16px;
    --line-17:25px;
    
    --font-16:15px;
    --line-16:20px;
    
    --font-14:14px;
    --line-14:18px;
    
}
	
.font25 li{ background-position: top 8px left !important;}	


 



}
@media only screen and (max-width: 1399px) {

:root
{
	--container: 1170px;
	--container1: 1200px;
   	
    /* font-sizes */
    --font-80:55px;
    --line-80:65px;
    
    --font-65:45px;
    --line-65:55px;
    
    --font-50:40px;
    --line-50:50px;
    
    --font-40:30px;
    --line-40:40px;
    
    --font-45:35px;
    --line-45:45px;
    
    --font-30:25px;
    --line-30:35px;
    
    --font-28:22px;
    --line-28:32px;
    
    --font-25:18px;
    --line-25:29px;
    
    --font-22:17px;
    --line-22:25px;
    
    --font-20:16px;
    --line-20:25px;
    
    --font-18:15px;
    --line-18:24px;
    
    --font-17:15px;
    --line-17:23px;
    
    --font-16:14px;
    --line-16:19px;
    
    --font-14:13px;
    --line-14:15px;
}

.navbar-brand{ width: 145px;}
.butns{ line-height: 50px;}
.bt2{ min-height: 655px;}


.tophead{ padding: 75px 0;}
.whBox{ height: 133px;}
.whBoxB {
  height: 285px;
}

.roundR {
  width: 457px;
  height: 457px;}
.bluBtn {
  min-width: 140px;line-height: 50px;}

.font25 li{ background-position: top 6px left !important;}	


.inS li {
  margin-bottom: 16px;
}
.inS{ left: 0px;}







} 


@media only screen and (max-width: 1299px) {
.roundR {
  width: 450px;
  height: 450px;}
.workSec .col-md-6 {
  padding: 0 12px;
}
.workSec .row {
  margin: 0 -12px;
}
.howRow {
  margin-left: -12px;
  margin-right: -12px;
}
.howRow .col-md-3 {
  padding: 0 12px;
}
.blueSec{   padding: 40px 0 70px;}





}


@media only screen and (max-width: 1199px) {

:root
{
--he1:80px;
--he2:80px;
--he3:71px;
--he4:78px;
--he7:53px;
--he10:68px;


}
:root
{
	--container: 940px;
	--container1: 1000px;
   	
    /* font-sizes */
    --font-80:50px;
    --line-80:60px;
    
    --font-65:40px;
    --line-65:50px;
    
    --font-50:35px;
    --line-50:45px;
    
    --font-40:25px;
    --line-40:35px;
    
    --font-45:30px;
    --line-45:40px;
    
    --font-30:20px;
    --line-30:30px;
    
    --font-28:20px;
    --line-28:30px;
    
    --font-25:18px;
    --line-25:29px;
    
    --font-22:17px;
    --line-22:25px;
    
    --font-20:16px;
    --line-20:25px;
    
    --font-18:15px;
    --line-18:24px;
    
    --font-17:15px;
    --line-17:23px;
    
    --font-16:14px;
    --line-16:19px;
    
    --font-14:13px;
    --line-14:15px;
}


.roundL {
  width: 370px;
  height: 370px;}
.ligtBox, .drkBox{ padding: 28px;}



.runfdLogo {
  width: 95px;
  height: 95px;padding: 30px;background-size: 100% 100%;}
 .bt2 {
    min-height: 567px;
  }
.bt1{ min-width: 941px; min-height: 1006px;}
.fetureSec::before {background-size: 100%;}
.fetureSec{ padding-bottom: 30px !important;}

.mt-5 {
  margin-top: 1.5rem !important;
}

.testeBox {
  border-radius: 17px;}

.roundR {
    width: 350px;
    height: 350px;
  }
 .bluBtn {
    min-width: 119px;
    line-height: 45px;
  }


.inS li a {
  width: 40px;
  height: 42px;
  background: #fff;
  border-radius: 6px;
}
.inS li {
    margin-bottom: 10px;
  }


}


@media only screen and (max-width: 991px) {
.nav_top .navbar-toggler{ border: none; background: none;padding: 10px 0; margin-right: 0px;box-shadow: none;}
.nav_top .navbar-toggler .icon-bar {display: block;width: 34px;height: 3px;  border-radius: 16px; background-color: #fff;}
.nav_top .navbar-toggler .icon-bar + .icon-bar {  margin-top: 6px;}
.navbar-toggler .icon-bar{-moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.navbar-toggler.showtoggle .icon-bar:nth-child(1) {transform: translateY(8px) rotate(45deg);}
.navbar-toggler.showtoggle .icon-bar:nth-child(2) { opacity: 0;}  
.navbar-toggler.showtoggle .icon-bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg);} 

.navbar-collapse{ position: absolute; top: 100%; left: 0px; background: rgba(0,0,0,0.9); width: 100%; z-index: 11;}
.navbar-brand{ padding-left: 0px;}
.menu_sec li a{ width: 100%; padding: 10px 15px;}
 .navbar-brand {
    width: 130px;
  }        
:root
{
--he1:70px;
--he2:70px;
--he3:61px;
--he4:68px;
--he7:43px;
--he10:58px;


}
:root
{
	--container: 100%;
	--container1: 100%;
   	
    /* font-sizes */
    --font-80:40px;
    --line-80:50px;
    
    --font-65:35px;
    --line-65:40px;
    
    --font-50:30px;
    --line-50:40px;
    
    --font-40:22px;
    --line-40:32px;
    
    --font-45:25px;
    --line-45:35px;
    
    --font-30:19px;
    --line-30:25px;
    
    --font-28:19px;
    --line-28:25px;
    
    --font-25:17px;
    --line-25:29px;
    
    --font-22:17px;
    --line-22:25px;
    
    --font-20:16px;
    --line-20:25px;
    
    --font-18:15px;
    --line-18:24px;
    
    --font-17:15px;
    --line-17:23px;
    
    --font-16:14px;
    --line-16:19px;
    
    --font-14:13px;
    --line-14:15px;
}


.roundL {
  width: 370px;
  height: 370px;}
.ligtBox, .drkBox{ padding: 28px;}

.tabrowRt {
  width: 384px;}
.tabListBx{ min-height: 80px;}

.bannersec{ padding: 143px 0 40px 0;}

.bluBtn {
  min-width: 115px;
  padding: 0 20px;
  line-height: 47px;}
.roundR {
    width: 370px;
    height: 370px;
  }
.ic sup {
  width: 20px;
  height: 20px;font-size: 10px;}
.flowLst li{ padding: 7px 0;}


.bl2, .bl1{ background-size: 100%;}
.howRow .whBoxRa::before { display: none;}



 .tophead {
    padding: 50px 0;
  }






}


@media only screen and (max-width: 890px){
 .roundL, .roundR {
    width: 300px;
    height: 300px;
  }
:root
{
--he1:60px;
--he2:60px;
--he3:51px;
--he4:58px;
--he7:33px;
--he10:48px;


}
.whBoxRa .shq{ border-radius: 14px;}
 .whBox {
    height: 90px;
    border-radius: 14px;
  }
.whBoxB {
    height: 198px;
  }


.inS li a {
    width: 31px;
    height: 34px;
    background: #fff;
    border-radius: 3px;
  }




}
 
@media only screen and (max-width: 767px){
.tabrowRt {
    width: 100%;top: inherit;
  right: 0px;
  transform: inherit;position: inherit;
  }
.tabrowLft {
  max-width: 100%;
}
.logosSec{ padding: 24px 0;}
.cenLogo {
  max-width: 68px;}
.bluBtn {
    min-width: 104px;
    padding: 0 20px;
    line-height: 36px;
    font-size: 14px;
  }
.ligtBox, .drkBox{ height: auto;}
.mb-5 {
  margin-bottom: 1.5rem !important;
}
.tophead {
    padding: 50px 0;
  }
.ps-5 {
  padding-left: 12px !important;
}




.libx {
  padding: 4px;
}

.whBoxRa .shq{ border-radius: 5px;}
 .whBox {
    height: 63px;
    border-radius: 5px;
  }
 .whBoxB {
    height: 134px;
  }
  
.howBox{ border-radius: 8px;}  
.howRow .shq {
  border-radius: 8px;
}  
.deskLft, .deskRt {
  padding: 49px 22px;
  text-align: left;
}
.midiaUser i {
  width: 60px;
  height: 60px;}  
.midiaUser strong {
  font-size: 17px;
}  
.midiaUser p{ font-size: 12px;}  
  

.multlogo{ margin-bottom: 20px;}

.footIfo li{ padding: 10px;}
.footIfo{ padding: 8px 0;}
.mw-70 {
  max-width: 100%;
  text-align: center;
}


.intregrtRow{ text-align: center;}



.intregrtRow { margin-bottom: 0px !important;}



.intrePic {
  position: relative;
  max-width: 440px;
  margin: 0px auto 20px;
}

.inS li a {
    width: 37px;
    height: 39px;
    background: #fff;
    border-radius: 5px;
  }





  
}




@media only screen and (max-width: 640px){ 

.deskLft, .deskRt {
    padding: 49px 22px;
    text-align: left;
    width: 100%;
  }  
.dashLIst li a {
    padding: 0 14px;
    font-size: 13px;
  }




.blueIn{ padding: 70px 34px;}

.tTxt{ padding: 17px;}
.hitgrundRow .rtTxt {
  padding-right: 10px;
}
.footMain{ background-size: 100%, 100%;}
.footIfo li img{ max-width: 20px;}
.footIfo li {
    padding: 6px;
    font-size: 14px;
  }



} 

@media only screen and (max-width: 575px){ 
 .howRow .col-md-3 {
    padding: 0 12px;
    width: 50%; margin: 10px 0;
  }
.howRow .whBoxRa::before {display: none;}

p br{ display: none;}

.listtk li{ margin-bottom: 8px;}



}
@media only screen and (max-width: 480px){ 
:root
{
--he1:50px;
--he2:50px;
--he3:41px;
--he4:48px;
--he7:23px;
--he10:38px;


}
:root
{
	--container: 100%;
	--container1: 100%;
   	
    /* font-sizes */
    --font-80:35px;
    --line-80:40px;
    
    --font-65:32px;
    --line-65:40px;
    
    --font-50:30px;
    --line-50:40px;
    
    --font-40:22px;
    --line-40:32px;
    
    --font-45:25px;
    --line-45:35px;
    
    --font-30:19px;
    --line-30:25px;
    
    --font-28:19px;
    --line-28:25px;
    
    --font-25:16px;
    --line-25:25px;
    
    --font-22:16px;
    --line-22:25px;
    
    --font-20:16px;
    --line-20:25px;
    
    --font-18:15px;
    --line-18:24px;
    
    --font-17:15px;
    --line-17:23px;
    
    --font-16:14px;
    --line-16:19px;
    
    --font-14:13px;
    --line-14:15px;
}


.ic .licn {
  border-width: 1px;
  border-radius: 4px;}

.blueIn{ padding: 50px 30px;}

.videoBtn{ width: 186px;
  line-height: 47px;}

h1 br, h2 br, h3 br, h4 br, h5 br, h6 br{ display: none;}

.flowLst {
  padding: 0;
  max-width: 100%;
}

.intrePic {
  position: relative;
  max-width: 370px;
  margin: 0px auto 20px;
}

.inS li a {
    width: 30px;
    height: 33px;
    background: #fff;
    border-radius: 4px;
  }





}







@media only screen and (max-width: 400px){ 
.roundL, .roundR {
    width: 250px;
    height: 250px;
  }

.bluBtn {
    min-width: 89px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 11px;
  }
.dashLIst li a {
    padding: 0 10px;
    font-size: 12px;
    line-height: 40px;
    border-radius: 7px;
  }

.inS li a {
    width: 27px;
    height: 27px;
    background: #fff;
    border-radius: 4px;
  }
 .inS li {
    margin-bottom: 8px;
  }


}