/* ----------------------------------------------------------------
	Custom CSS
-----------------------------------------------------------------*/
/* --------------------- 
	FONT ADD-ON
----------------------*/
/* QUICKSAND */
@font-face {
  font-family: 'quicksand';
  font-weight: 300;
  src: url("fonts/Quicksand/Quicksand-Light.ttf")
}

@font-face {
  font-family: 'quicksand';
  font-weight: 400;
  src: url("fonts/Quicksand/Quicksand-Regular.ttf")
}

@font-face {
  font-family: 'quicksand';
  font-weight: 500;
  src: url("fonts/Quicksand/Quicksand-Medium.ttf")
}

@font-face {
  font-family: 'quicksand';
  font-weight: 600;
  src: url("fonts/Quicksand/Quicksand-SemiBold.ttf")
}

@font-face {
  font-family: 'quicksand';
  font-weight: 700;
  src: url("fonts/Quicksand/Quicksand-Bold.ttf")
}

/* POPPINS */
@font-face {
  font-family: 'Poppins';
  font-weight: 300;
  src: url("fonts/Poppins/Poppins-Light.ttf")
}

@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  src: url("fonts/Poppins/Poppins-Regular.ttf")
}

@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  src: url("fonts/Poppins/Poppins-Medium.ttf")
}

@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  src: url("fonts/Poppins/Poppins-SemiBold.ttf")
}

@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  src: url("fonts/Poppins/Poppins-Bold.ttf")
}

/* UTM MAGNESIUM */
@font-face {
  font-family: 'UtmMagnesium';
  font-weight: 700;
  src: url("fonts/UtmMagnesium/UTM-MAGNESIUM.TTF")
}

@font-face {
  font-family: 'FredokaOne';
  font-weight: 700;
  src: url("fonts/FredokaOne/FredokaOne.ttf")
}

/* --------------------- 
	BASE
----------------------*/
html {
  /* scroll-behavior: smooth; */
}

.full_screen {
  min-height: calc(100vh - 60px);
}

a:hover {
  color: var(--primary-color);
  text-decoration: underline !important;
}

/* --------------------- 
	Header 
----------------------*/
/* Title */
.sTitle {
  /* font-family: FredokaOne !important; */
  /* font-family: UtmMagnesium !important; */
  font-family: Inter, Segoe UI, system-ui !important;
}

/* Logo */
#header,
#header-wrap,
#logo img {
  height: 60px;
}

#header #header-wrap {
  height: 60px;
  transition: .4s;
}

/* primary-menu */
#primary-menu {
  height: 60px;
  margin: 0 auto;
}

#primary-menu,
#primary-menu ul {
  position: relative;
}

#primary-menu ul li {
  cursor: pointer;
}

#primary-menu ul li a {
  padding: 19px 12px;
}

#primary-menu ul li a.active {
  color: #00b0f0 !important;
}

#primary-menu .menu-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100px;
  background: var(--primary-color);
  transition: .3s ease-in-out
}

/* --------------------- 
	Slider 
----------------------*/
#slider .swiper-pagination {
  margin: auto;
  position: absolute;
  right: 0px;
  top: 50%;
  left: inherit;
  width: 5%;
  height: auto;
  bottom: inherit !important;
  transform: translateY(-50%);
}

#slider .swiper-pagination .swiper-pagination-bullet {
  margin: 20px 0;
  display: block;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 2px solid #ffffff;
}

#slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 2px solid #ffffff;
  background: var(--primary-color) !important;
}

#slider .slider-caption.slider-caption-center {
  max-width: 600px;
  transform: translateY(-50%);
  top: 50% !important;
}

/* Overview About Us*/
#overview {
  text-align: center;
}

#overview .heading-block_o {
  padding: 20px 0;
  margin: 0;
}

#overview .inventory_total_data_o {
  display: flex;
  justify-content: center;
  margin: 20px 0 40px 20px;
  flex-wrap: wrap;
}

#overview .inventory_total_data_o .inventory_data_item_o {
  margin: 0 40px;
  text-align: center;
}

#overview .inventory_total_data_o .inventory_data_item_o .inventory_data_number_o {
  margin: 0;
  padding: 10px 0;
  font-size: 3rem;
  font-weight: bold;
  border-top: 1px solid #333;
  display: inline-block;
}

#overview .inventory_total_data_o .inventory_data_item_o p {
  margin: 10px 0;
  font-size: 20px;
}

#overview .inventory_zone_o .inventory_item_o .inventory_item_meta_o .inventory_name_o {
  font-size: 32px;
}

#overview .inventory_zone_o .inventory_item_o .inventory_item_meta_o p {
  margin: 0;
  font-size: 16px;
}

#overview .inventory_total_data_o {
  margin: 20px 0 40px 0;
}

#overview .inventory_total_data_o .inventory_data_item_o .inventory_data_number_o {
  font-size: 2.5rem;
}

#overview .inventory_total_data_o .inventory_data_item_o p {
  font-size: 25px;
}

/* Packages */
#packages .heading-block_o {
  padding: 20px 0;
  margin: 0;
}

/* --------------------- 
	About us 
----------------------*/
#about_us {
  padding: 25px 0;
}

#about_us .about_us_heading {
  font-size: 3rem;
}

#about_us .about_us_right {
  padding-left: 40px;
}

#about_us .about_us_content {
  font-family: 'quicksand';
  text-align: justify;
}

.img_about_right {
  border-radius: 20px;
}

#about_us .saas_service {
  font-weight: bold;
  font-size: 17px;
}

#about_us .saas_service_title {
  font-size: 17px;
  color: #777;
  margin-bottom: 18px;
}

/* Highlight box */
.iwifi-highlight-box {
  background: #f8f9fa;
  border-left: 4px solid #02b1f0;
  padding: 0px 20px;
  margin-bottom: 25px;
  border-radius: 4px;
}

.iwifi-highlight-box.light {
  background: #ffffff;
  border-left-color: #2ecc71;
}

/* Feature list */
.iwifi-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.iwifi-feature-list li {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  color: #777777;
  margin-bottom: 0px;
  line-height: 1.5;
}

/* Icon */
.iwifi-icon {
  color: #2ecc71;
  font-weight: bold;
  margin-right: 10px;
  font-size: 16px;
}

/* Subtitle */
.iwifi-subtitle {
  font-weight: 600;
  margin-bottom: 12px;
  color: #0077ff;
}


/* --------------------- 
	Service 
----------------------*/
#service {
  background: #333;
  padding: 0;
}

#service .service_heading {
  padding: 0 20px;
  border: 5px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-shadow: 0px 1px 10px #3e3e3e;
  font-size: 4vw;
  box-shadow: 0px 1px 10px #3e3e3e;
  white-space: nowrap;
}

#service .service_heading--sm {
  display: none;
  padding: 0 10px;
  color: #fff;
  font-size: 35px;
  margin: 0;
  text-align: center;
}

#service .service_image {
  background-image: url(../images/service/service.jpg);
  background-attachment: fixed;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
}

#service .list-box {
  padding: 40px 0;
  background-color: #333;
  height: 100%;
}

#service .list-box .service_box {
  margin: 40px 0;
  display: flex;
}

#service .list-box .service_box:first-child {
  margin-top: 0;
}

#service .list-box .service_box:last-child {
  margin-bottom: 0;
}

#service .service_box .service_box_icon {
  margin-right: 50px;
  width: 70px;
}

#service .service_box .service_box_content {
  flex: 1;
}

#service .service_box .service_box_heading {
  margin-bottom: 15px;
  font-size: 23px;
  line-height: 1;
}

#service .service_box .service_box_desc {
  margin: 0;
  font-size: 17px;
  font-family: 'quicksand';
  text-align: justify;
}

/* --------------------- 
	S-member 
----------------------*/
#smember {
  background: #ccc;
  padding: 0;
}

#smember .smember_heading {
  padding: 0 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #333;
  font-size: 4vw;
  white-space: nowrap;
}

#smember .smember_heading--sm {
  display: none;
  padding: 0 10px;
  color: #fff;
  font-size: 35px;
  margin: 0;
  text-align: center;
}

#smember .smember_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background-color: #bbb;
  color: #333;
}

#smember .smember_content {
  text-align: center;
  padding: 20px;
}

#smember .smember_content .smember_tos {
  background-color: #ccc;
  height: 100%;
  display: inline-block;
  background: #333333;
  color: #fff;
  border-radius: 50px;
  padding: 10px 20px;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 20px;
  transition: .3s;
}

#smember .smember_content .smember_tos:hover {
  background: #222;
  text-decoration: none !important;
}

#smember .smember_content .smember_contact {
  margin: 10px 0;
  list-style: none;
}

#smember .smember_content .smember_contact li {
  margin-top: 0;
  color: #525252;
  font-size: 16px;
  font-family: 'quicksand';
}

#smember .smember_content .smember_contact li span {
  margin-bottom: 0;
}

/* --------------------- 
	Inventory 
----------------------*/
#inventory {
  text-align: center;
}

#inventory .heading-block {
  padding: 20px 0;
  margin: 0;
}

#inventory .inventory_total_data {
  display: flex;
  justify-content: center;
  margin: 20px 0 40px 20px;
  flex-wrap: wrap;
}

#inventory .inventory_total_data .inventory_data_item {
  margin: 0 40px;
  text-align: center;
}

#inventory .inventory_total_data .inventory_data_item .inventory_data_number {
  margin: 0;
  padding: 10px 0;
  font-size: 3rem;
  font-weight: bold;
  border-top: 1px solid #333;
  display: inline-block;
}

#inventory .inventory_total_data .inventory_data_item p {
  margin: 10px 0;
  font-size: 20px;
}


#inventory .owl-carousel .owl-stage {
  padding: 0;
}

#inventory .inventory_zone .inventory_item {
  position: relative;
}

#inventory .inventory_zone .inventory_item .inventory_item_image {
  height: calc(100vh - 60px);
  position: relative;
}

#inventory .inventory_zone .inventory_item .inventory_item_image:after {
  content: "";
  /* background: rgba(58, 56, 51, 0.1); */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#inventory .inventory_zone .inventory_item .inventory_item_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

#inventory .inventory_zone .inventory_item .inventory_item_meta {
  padding: 20px 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
}

#inventory .inventory_zone .inventory_item .inventory_item_meta .inventory_name {
  margin-bottom: 0;
  font-size: 40px;
  color: #333333;
}

#inventory .inventory_zone .inventory_item .inventory_item_meta p {
  margin: 0;
  font-size: 18px;
  color: #616161;
  font-family: quicksand;
}

#inventory .inventory_zone .swiper-button {
  padding: 50px 20px;
  /* background-color: rgba(255, 255, 255, 0.7); */
  filter: brightness(10) saturate(0);
  margin: 0 -10px;
}

/* Type */
#inventory .inventory_type_heading {
  margin: 0;
  /* color: #555; */
  font-size: 30px;
  text-align: center;
  font-weight: 400;
  font-family: 'quicksand';
  position: relative;
  display: inline-block;
}

#inventory .inventory_type_heading:after,
#inventory .inventory_type_heading:before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 1px;
  background: #333;
  margin: 0 10px;
}

#inventory .inventory_type_heading:after {
  right: 100%;
}

#inventory .inventory_type_heading:before {
  left: 100%;
}

#inventory .inventory_type {
  margin: 40px auto;
}

#inventory .inventory_type .inventory_item .inventory_item_icon {
  width: 80px;
  height: 80px;
  margin: auto;
  border-radius: 50%;
  padding: 0px 14px;
  border: 2px solid #333;
  transition: .4s;
}

#inventory .inventory_type .inventory_item:hover .inventory_item_icon {
  border-color: var(--primary-color) !important;
}

#inventory .inventory_type .inventory_item .inventory_item_icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#inventory .inventory_type .inventory_item .inventory_item_meta {
  padding: 10px 0;
  width: 100%;
  background: #ffffff;
  text-align: center;
}

#inventory .inventory_type .inventory_item .inventory_item_meta .inventory_name {
  margin-bottom: 45px;
  color: #000;
  font-weight: 400;
  transition: .4s;
}

#inventory .inventory_type .inventory_item:hover .inventory_item_meta .inventory_name {
  color: var(--primary-color) !important;
}

#inventory .inventory_type .inventory_item {
  position: relative;
}

#inventory .inventory_type .inventory_item .inventory_item_image {
  height: calc(100vh - 187px);
}

#inventory .inventory_type .inventory_item .inventory_item_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#inventory .inventory_type .swiper-pagination span {
  background: transparent;
  border-color: #333;
}

#inventory .inventory_type .swiper-pagination span.swiper-pagination-bullet-active {
  background: #00b0f0 !important;
  border-color: #333;
}

/* ----------------wifi plus------------------- */
#wfplus .swiper-button {
  padding: 0 20px;
  /* background-color: rgba(255, 255, 255, 0.7); */
  filter: brightness(10) saturate(0);
  margin: 0 -10px;
}

#wfplus .heading-block {
  padding: 20px 0;
  margin: 0;
}

#wfplus .tag {
  margin: 36px 10px 10px 10px;
  background-color: #d2d2d2;
  padding-top: 33px;
}

#wfplus .tag:hover {
  -webkit-transform: scale(1.07);
  -ms-transform: scale(1.07);
  -o-transform: scale(1.07);
  transform: scale(1.07);
  box-shadow: 2px 1px 5px 2px #ff5722;
}

#wfplus .tag:hover .ap_name {
  background-color: #ff5722;
}

#wfplus .ap_name {
  color: #fff;
  background: #4c4c4c;
  padding: 16px 0;
  font-size: 20px;
  text-align: center;
  font-family: "Roboto", Sans-serif;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  margin: -55px 20px 0px 20px;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
}

#wfplus .price {
  color: #4c4c4c;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  height: 199px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

#wfplus .tag .price ul {
  list-style: none;
  font-size: 15px;
  font-family: 'Open Sans';
  color: #9095aa;
}

#wfplus .tag .price li {
  border-bottom: 1px solid #bdbec3;
  height: 40px;
  line-height: 35px;
  color: #4c4c4c;
  padding: 0 6px;
  display: flex;
}

#wfplus .tag .price li:nth-child(2n+1) {
  background-color: #f1ebeb;
}

#wfplus .tag .price p {
  color: #15100c;
  font-weight: 600;
  width: 30%;
}

#wfplus .tag .price span {
  color: #3e3b3b;
  font-weight: 400;
  width: 43%;
  text-align: left;
}

#wfplus .tag .price .img_ap {
  width: 30px;
  margin-left: 36px;
  padding: 3px 0;
}

#wfplus .tag .price .img_ap:hover {
  transform: scale(3.5);
  padding-right: 5px;
}

#wfplus .ap_footer {
  padding-top: 20px;
}

#wfplus .ap_footer p {
  color: #4c4c4c;
  font-size: 14px;
  text-align: center;
  margin: 0;
  padding-bottom: 9px;
}

#wfplus .ap_footer .group_link .link_buy {
  font-style: initial;
  padding: 0 6px;
  text-decoration: underline !important;
}

#wfplus .ap_footer .group_link {
  text-align: center;
  font-size: 15px;
  padding-bottom: 15px;
}

/* #wfplus .ap_footer button{
    border: none;
    padding: 5px 31px;
    margin-bottom: 4px;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    font-family: initial;
    font-weight: bold;
    background-color: #d24d1a;
    box-shadow: 2px 2px 12px 5px #ff5722;
} */
#wfplus .ap_footer button {
  border: none;
  padding: 5px 31px;
  margin-bottom: 4px;
  border-radius: 4px;
  color: #d24d1a;
  font-size: 18px;
  font-family: initial;
  font-weight: bold;
  border: 1px solid #d24d1a;
}

#wfplus .ap_footer button:hover {
  background-color: #d24d1a;
  color: #fff;
}

#wfplus .ap_footer button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.1s;
}

#wfplus .ap_footer button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.2s;
}

#wfplus .ap_footer button:hover span {
  padding-right: 16px;
}

#wfplus .ap_footer button:hover span:after {
  opacity: 1;
  right: 0;
}

#wfplus .ap_footer .group_link .pdf {
  color: #b91105;
}

#wfplus .ap_footer .group_link .video {
  color: #1d5eb1;
}

#wfplus .ap_footer .group_link .file_config {
  color: #1f6731;
}

/* --------------------- 
	network 
----------------------*/
#network {
  padding: 20px 0;
  overflow: visible;
}

#network .heading-block span {
  font-family: 'quicksand';
}

#network .network_select_province {
  margin-top: 10px;
  border: 1px solid #333;
}

#network .container {
  /* padding:20px 0; */
}

#network .network_province {
  position: relative;
  text-align: center;
  display: flex;
  width: 100%;
}

#network .network_province:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

#network .network_province .network_province_image {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 500px;
  margin: auto;
  border-radius: 50%;
  border: 10px solid #ddd;
  overflow: hidden;
}

#network .network_province .network_province_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#network .network_province .network_province_meta {
  position: absolute;
  top: 15%;
  right: 0;
  z-index: 100;
  text-align: center;
}

#network .network_province .network_province_ap {
  padding: 0px 37px;
  margin-right: 50px;
  background: #eee;
  display: inline-block;
  font-size: 25px;
  font-weight: bold;
  color: #333;
  transform: skew(-20deg);
}

#network .network_province .network_province_meta .network_province_name {
  margin: 0;
  font-size: 40px;
  padding: 0px 30px;
  background: #333;
  color: #fff;
  transform: skew(-20deg);
}

#network .jsmaps-text {
  display: none !important;
  text-align: center;
}

#network .jsmaps {
  background: url('../images/network/extra.png');
  background-size: contain;
  background-repeat: no-repeat;
}

#network .network_province_item {
  position: relative;
}

#network .network_province_item .network_province_item_image {
  height: calc(60vh);
  position: relative;
}

#network .network_province_item .network_province_item_image:after {
  content: "";
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#network .network_province_item .network_province_item_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#network .network_province_item .network_province_item_meta {
  margin: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#network .network_province_item .network_province_item_meta .network_province_name {
  margin-bottom: 0;
  font-size: 40px;
  color: #fff;
  white-space: nowrap;
}

#network .network_province_item .network_province_item_meta p {
  margin: 0;
  padding: 3px 0;
  font-size: 36px;
  color: #eee;
  font-family: quicksand;
  background: #0000009e;
}

#network .network_default {}

/* --------------------- 
	Solution 
----------------------*/
#solution {
  padding-bottom: 40px;
  background-image: url('../images/wifi_solution/back_ground.jpg');
  background-size: cover;
  background-attachment: fixed;
}

#solution .feature-box {
  display: flex;
  position: relative;
  padding-left: 35px;
  width: 80%;
  margin: 40px auto 0 auto;
}

#solution .header-block {
  top: 20px;
  left: 20px;
  background: #FF8925;
  color: black;
  padding-left: 30px;
  width: 20%
}

#solution .text-box {
  border: 2px solid #00b0f0;
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 32px 17px 27px 43px;
  width: 100%;
  height: 114px;
  display: inline-table;
  align-items: center;
}

#solution .text-box p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-family: 'quicksand';
  /* text-align: justify; */
}

#solution .circle {
  position: absolute;
  border: 1px solid black;
  background-color: white;
  height: 70px;
  border-radius: 50%;
  width: 70px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  margin: auto;
  padding: 12px;
  transform: translateX(-50%);
  z-index: 100;
}

#solution .iconSolution {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  margin: auto;
  transform: translateX(-50%);
  z-index: 100;
  width: 25%;
}

#solution .contentSolution {
  color: #00b0f0;
  font-weight: bold;
}

/* Service and solution */
#service_solution {
  /* padding: 30px 0; */
}

/* software */
#software {
  padding: 30px 0;
}

/* --------------------- 
	partner 
----------------------*/
#partner {
  padding: 40px 0;
  position: relative;
  background-image: url('../images/partner/bg2.jpg');
  background-size: cover;
  background-attachment: fixed;
}

#partner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.6); */
}

#partner .heading-block {
  margin-bottom: 20px;
}

#partner .partner_heading {
  font-size: 40px;
  position: relative;
  z-index: 100;
  color: #212529;
}

#partner .partner_item {
  position: relative;
}

#partner .partner_container img {
  height: 100px;
}

#partner .partner_item .partner_item_image {
  margin: 20px 20px;
  border: 2px solid #00b0f0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  height: 90px;
  padding: 20px 20px;
  width: auto;
  background-color: #fff;
}

#partner .partner_item .partner_item_image img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* --------------------- 
	ads 
----------------------*/
#ads {
  padding: 50px 0;
  position: relative;
  color: #eee;
}

#ads .container {
  position: relative;
}

#ads .ads_list {
  padding: 20px 0;
}

#ads .swiper-pagination {
  bottom: 0 !important;
}

#ads .swiper-pagination span {
  background: transparent;
  border-color: #333;
  width: 15px;
  height: 15px;
}

#ads .swiper-pagination span.swiper-pagination-bullet-active {
  background: #333 !important;
  border-color: #333;
}

#ads .ads_item {
  background-color: #fff;
  opacity: 0 !important;
  padding: 15px;
}

#ads .ads_item.swiper-slide-active {
  opacity: 1 !important;
}

#ads .ads_item .ads_heading h2 {
  margin-bottom: 20px;
  font-size: 25px;
  position: relative;
  z-index: 100;
  color: #555;
  text-align: left;
}

#ads .ads_item p {
  font-size: 18px;
  color: #555;
  text-align: justify;
  font-family: 'quicksand';
}

#ads .ads_item .ads_content {
  text-align: center;
  margin-top: 15px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'quicksand';
  color: #555;
  white-space: nowrap;
}

#ads .ads_item .ads-flow {
  margin: 20px 0;
  justify-content: space-between;
  padding: 0 0;
}

#ads .ads_item .ads-flow-item {
  padding: 0;
  position: relative;
}

#ads .ads_item .ads-flow-item img {
  /* filter: grayscale(.3) brightness(.7) contrast(.8); */
}

#ads .ads_heading_right .arrow {
  width: 50px;
}

#ads .ads_item p {
  margin-bottom: 5px !important;
}

#ads .ads_item img {
  filter: grayscale(1)
}


#ads .animate-step-2 {
  animation-delay: .3s !important;
}

#ads .animate-step-3 {
  animation-delay: .6s !important;
}


#ads .animate-step-4 {
  animation-delay: .9s !important;
}


#ads .animate-step-5 {
  animation-delay: 1.2s !important;
}

#ads .arrow {
  width: 50px;
  margin: auto;
}

/* --------------------- 
	News 
----------------------*/
#news {
  background: #00b0f0;
  padding: 0;
}

#news .news_heading {
  padding: 0 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #00b0f0;
  font-size: 3vw;
  white-space: nowrap;
}

#news .news_heading--sm {
  display: none;
  padding: 0 10px;
  color: #fff;
  font-size: 35px;
  margin: 0;
  text-align: center;
}

#news .news_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background-color: #a3e1f7;
}

#news .news_content {
  padding: 20px 5px;
}

#news .news_content .news_list {
  margin: 10px 0;
  list-style: square;
  color: #f9f9f9;
}

#news .news_content .news_list li a {
  margin-top: 0;
  color: #f9f9f9;
  font-size: 16px;
  font-family: 'quicksand';
  text-decoration: none !important;
  line-height: 25px;
}

#news .news_content .news_list li a:hover {
  color: #000000;
}

/* --------------------- 
	Footer 
----------------------*/
#footer {
  background: #222;
  font-family: 'quicksand';
}

#footer .footer_wrapper {
  padding: 0;
  color: #fff;
}

#footer .footer_wrapper hr {
  border-color: #00b0f0;
}

#footer .footer_wrapper .footer_logo {
  width: 200px;
}

#footer .footer_wrapper .footer_brand,
#footer .footer_wrapper .footer_policy {
  text-align: left;
}

#footer .footer_wrapper .footer_policy a {
  color: #fff;
}

#footer .footer_wrapper .footer_contact {
  text-align: right;
}

#footer .footer_wrapper .footer_contact_heading {
  color: #00b0f0;
}

#footer .footer_wrapper .footer_contact_list {
  list-style: none;
  padding: 0;
}

#footer .footer_wrapper .footer_contact_list li {
  margin: 10px 0;
}

#footer .footer_wrapper .footer_contact_list span {}

#footer .footer_wrapper .footer_contact_list i {
  margin-left: 10px;
}

#footer .footer_social {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

#footer .footer_social li {
  margin-left: 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  /* line-height: 30px; */
  /* border: 1px solid #777; */
}

#footer .footer_social li a {
  color: #fff
}

#footer .iconContact {
  width: 4%;
}

/* ----------------------------------------------------------------
	Responsive CSS
-----------------------------------------------------------------*/
/* LARGE */
@media (max-width: 1199.98px) {
  #primary-menu ul li a {
    padding: 19px 10px;
  }
}

/* MEDIUM */

/* Desktop only: slightly smaller ecosystem visual for better whitespace balance */
@media (min-width: 1200px) {
  .iweco-hero-visual {
    width: min(1320px, calc(100vw - 120px));
  }
}

@media (max-width: 991px) {

  /* HEADER */
  #header {
    position: fixed;
    width: 100%;
    z-index: 9999 !important;
  }

  /* LOGO */
  #logo {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* MENU */
  #primary-menu .menu-line {
    display: none
  }

  #primary-menu-trigger {
    top: 15px;
    font-size: 30px;
  }

  #primary-menu {
    height: auto;
  }

  /* About us*/
  #about_us {
    padding: 40px 0;
  }

  #about_us .about_us_right {
    padding: 0;
  }

  #about_us .about_us_heading {
    font-size: 2rem;
    margin: 15px 0;
    text-align: center;
  }

  #about_us .about_us_content {
    font-size: 15px;
  }



  /* SERVICE */
  /* SOLUTION */
  #solution .feature-box {
    width: 100%;
  }

  /* INVENTORY */
  #inventory .inventory_zone .inventory_item .inventory_item_meta .inventory_name {
    font-size: 32px;
  }

  #inventory .inventory_zone .inventory_item .inventory_item_meta p {
    margin: 0;
    font-size: 16px;
  }

  #inventory .inventory_total_data {
    margin: 20px 0 40px 0;
  }

  #inventory .inventory_total_data .inventory_data_item .inventory_data_number {
    font-size: 2.5rem;
  }

  #inventory .inventory_total_data .inventory_data_item p {
    font-size: 18px;
  }
}

/* SMALL */
@media (max-width: 767px) {
  .container {
    padding: 20px !important;
  }

  /* MENU SM */
  #primary-menu {
    height: auto;
  }

  /* SLIDER SM */
  #slider .swiper-pagination {
    display: none;
  }

  /* SERVICE */
  #service .service_image {
    display: none;
  }

  #service .service_heading--sm {
    display: block;
  }

  /* ADS */

  #ads .ads_item .ads_content {
    margin-top: 10px;
    font-size: 14px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* INVENTORY */
  #inventory .inventory_total_data {
    margin: 20px 0;
  }

  #inventory .inventory_total_data .inventory_data_item {
    margin: 0 20px
  }

  #inventory .inventory_total_data .inventory_data_item .inventory_data_number {
    font-size: 2rem;
  }

  #inventory .inventory_total_data .inventory_data_item p {
    font-size: 14px;
  }

  /* FOOTER SM */
  #footer .footer_wrapper {
    padding: 20px 0;
  }

  #footer .footer_wrapper .footer_logo {
    margin: auto;
  }

  #footer .footer_wrapper .footer_contact,
  #footer .footer_wrapper .footer_copyright,
  #footer .footer_wrapper .footer_brand,
  #footer .footer_wrapper .footer_policy {
    text-align: center;
  }

  #footer .footer_wrapper .footer_social {
    justify-content: center;
  }

  #footer .footer_wrapper .footer_contact_list i {
    display: none;
  }

  #footer .footer_wrapper .footer_contact_list .iconContact {
    display: none;
  }
}

/* EXTRAL SMALL */
@media (max-width: 448px) {
  .heading-block {
    margin-bottom: 20px !important;
  }

  .heading-block h2 {
    font-size: 30px !important;
  }

  /* ABOUT */
  #about_us .about_us_content p {
    font-size: 15px !important;
  }

  /* SOLUTION */
  #solution .section {
    padding: 0;
  }

  #solution .section h2 {
    font-size: 30px !important;
  }

  /* INVENTORY */
  #inventory .inventory_total_data {
    margin: 20px 0;
    display: block;
    text-align: center;
  }

  /* SERVICE */
  #service .list-box {
    padding: 15px 0;
  }

  #service .list-box .service_box {
    display: block;
    margin: 15px 0;
  }

  #service .service_box .service_box_heading {
    text-align: center;
    font-size: 20px;
  }

  #service .service_box .service_box_icon {
    margin: 0 auto 15px auto;
    width: 70px;
  }

  #service .service_box .service_box_desc {
    font-size: 14px;
  }

  /* ADs */
  #ads {
    padding: 20px 0;
  }

  #ads .ads_item .arrow {
    margin: auto;
    width: 20px;
  }

  #ads .ads_item .ads_heading h2 {
    margin-bottom: 10px;
    font-size: 20px !Important;
  }

  /* ADS */

  #ads .ads_item .ads_content {
    font-size: 12px;
  }

  /* Network */
  #network .network_province_item .network_province_item_meta .network_province_name {
    font-size: 30px;
  }

  #network .network_province_item .network_province_item_meta p {
    font-size: 30px;
  }
}

.effect-fadeInLeft {
  position: relative;
  opacity: 0;
  left: -10%;
  transition: .8s ease;
}

.run-animation {
  animation: fadeInLeft .8s forwards;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    left: -10%;
  }

  to {
    opacity: 1;
    left: 0;
  }
}

/* =========================================================
   IWIFI PRO — PACKAGES REDESIGN V1
   ========================================================= */
#packages-v1.packages-v1 {
  padding: 15px 0 88px;
  background: #fff;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  color: #0b2341
}

#packages-v1 .packages-v1-head {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 58px
}

#packages-v1 .packages-v1-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #008fd5;
  margin-bottom: 13px
}

#packages-v1 .packages-v1-head h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -1.8px;
  font-weight: 700;
  color: #0b2341;
  margin: 0 0 14px
}

#packages-v1 .packages-v1-head h2 span {
  color: #00aeef
}

#packages-v1 .packages-v1-head p {
  font-size: 17px;
  line-height: 1.65;
  color: #7a8797;
  margin: 0
}

#packages-v1 .packages-v1-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #e5edf4;
  border-bottom: 1px solid #e5edf4
}

#packages-v1 .package-v1-card {
  position: relative;
  min-height: 555px;
  padding: 31px 30px 29px;
  background: #fff;
  border-right: 1px solid #e5edf4;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease
}

#packages-v1 .package-v1-card:first-child {
  border-left: 1px solid #e5edf4
}

#packages-v1 .package-v1-card:hover {
  z-index: 2;
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(20, 72, 111, .10)
}

#packages-v1 .package-v1-featured {
  background: linear-gradient(180deg, #f2fbff 0%, #fff 70%)
}

#packages-v1 .package-v1-stage {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 25px;
  position: relative
}

#packages-v1 .package-v1-stage:after {
  content: '→';
  position: absolute;
  right: -40px;
  color: #b9c8d5;
  font-size: 22px;
  z-index: 3
}

#packages-v1 .package-v1-card:last-child .package-v1-stage:after {
  display: none
}

#packages-v1 .package-v1-stage b {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e4f7ff;
  color: #00a7e8;
  font-size: 13px
}

#packages-v1 .package-v1-stage span {
  font-size: 12px;
  letter-spacing: 1.1px;
  font-weight: 700;
  color: #00a7e8
}

#packages-v1 .package-v1-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #eef9fe;
  color: #00a7e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  margin-bottom: 21px
}

#packages-v1 .package-v1-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 27px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.8px;
  color: #0b2341;
  margin: 0 0 7px
}

#packages-v1 .package-v1-card h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
  color: #536173;
  margin: 0 0 20px
}

#packages-v1 .package-v1-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #7a8797;
  min-height: 72px;
  margin: 0 0 22px;
  padding-bottom: 21px;
  border-bottom: 1px solid #e7edf2
}

#packages-v1 .package-v1-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 27px
}

#packages-v1 .package-v1-card li {
  position: relative;
  padding-left: 24px;
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #42536a
}

#packages-v1 .package-v1-card li:before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #00aeef;
  font-weight: 700
}

#packages-v1 .package-v1-fit {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 29px;
  padding-top: 16px;
  border-top: 1px solid #edf1f5;
  color: #8b96a4;
  font-size: 12px;
  line-height: 1.5
}

#packages-v1 .packages-v1-mobile-hint {
  display: none
}

@media(max-width:991.98px) {
  #packages-v1.packages-v1 {
    padding: 72px 0
  }

  #packages-v1 .packages-v1-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  #packages-v1 .package-v1-card:nth-child(3) {
    border-left: 1px solid #e5edf4
  }

  #packages-v1 .package-v1-stage:after {
    display: none
  }
}

@media(max-width:767.98px) {
  #packages-v1.packages-v1 {
    padding: 58px 0 48px
  }

  #packages-v1 .container {
    padding-left: 20px;
    padding-right: 0;
    max-width: none
  }

  #packages-v1 .packages-v1-head {
    text-align: left;
    margin: 0 20px 34px 0
  }

  #packages-v1 .packages-v1-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    margin-bottom: 10px
  }

  #packages-v1 .packages-v1-head h2 {
    font-size: 34px;
    line-height: 1.13;
    letter-spacing: -1.3px;
    margin-bottom: 11px
  }

  #packages-v1 .packages-v1-head p {
    font-size: 14px;
    line-height: 1.6;
    max-width: 330px
  }

  #packages-v1 .packages-v1-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border: 0;
    padding: 4px 20px 18px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
  }

  #packages-v1 .packages-v1-grid::-webkit-scrollbar {
    display: none
  }

  #packages-v1 .package-v1-card,
  #packages-v1 .package-v1-card:first-child,
  #packages-v1 .package-v1-card:nth-child(3) {
    flex: 0 0 84%;
    min-height: 510px;
    border: 1px solid #e3ebf2;
    border-radius: 18px;
    padding: 25px 23px;
    scroll-snap-align: start;
    box-shadow: 0 10px 30px rgba(20, 72, 111, .055)
  }

  #packages-v1 .package-v1-card:hover {
    transform: none
  }

  #packages-v1 .package-v1-stage {
    margin-bottom: 20px
  }

  #packages-v1 .package-v1-card h3 {
    font-size: 25px
  }

  #packages-v1 .package-v1-desc {
    min-height: 0
  }

  #packages-v1 .package-v1-fit {
    left: 23px;
    right: 23px;
    bottom: 24px
  }

  #packages-v1 .packages-v1-mobile-hint {
    display: block;
    margin: 3px 20px 0 0;
    text-align: right;
    font-size: 12px;
    color: #8996a5
  }

  #packages-v1 .packages-v1-mobile-hint span {
    color: #00aeef;
    font-size: 17px;
    margin-left: 5px
  }
}

/* =========================================================
   IWIFI PRO — PACKAGES V1.1 MOBILE COMPACT
   ========================================================= */
@media (max-width: 767.98px) {
  #packages-v1.packages-v1 {
    padding: 52px 0 40px;
  }

  #packages-v1 .container {
    padding-left: 20px;
    padding-right: 0;
  }

  #packages-v1 .packages-v1-head {
    margin: 0 20px 24px 0;
  }

  #packages-v1 .packages-v1-eyebrow {
    margin-bottom: 9px;
  }

  #packages-v1 .packages-v1-head h2 {
    font-size: 34px;
    line-height: 1.08;
    margin-bottom: 10px;
  }

  #packages-v1 .packages-v1-head p {
    font-size: 13.5px;
    line-height: 1.55;
    max-width: 335px;
  }

  #packages-v1 .packages-v1-grid {
    gap: 12px;
    padding: 2px 18px 12px 0;
    scroll-padding-left: 0;
  }

  #packages-v1 .package-v1-card,
  #packages-v1 .package-v1-card:first-child,
  #packages-v1 .package-v1-card:nth-child(3) {
    flex: 0 0 calc(100vw - 58px);
    min-height: 0;
    height: auto;
    padding: 20px 20px 18px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(20, 72, 111, .055);
  }

  #packages-v1 .package-v1-stage {
    height: 36px;
    gap: 9px;
    margin-bottom: 16px;
  }

  #packages-v1 .package-v1-stage b {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  #packages-v1 .package-v1-stage span {
    font-size: 11px;
    letter-spacing: 1px;
  }

  #packages-v1 .package-v1-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 20px;
    margin-bottom: 14px;
  }

  #packages-v1 .package-v1-card h3 {
    font-size: 24px;
    margin-bottom: 5px;
  }

  #packages-v1 .package-v1-card h4 {
    font-size: 15px;
    margin-bottom: 17px;
  }

  /* Mobile: proposition already explains the package; remove long copy. */
  #packages-v1 .package-v1-desc {
    display: none;
  }

  #packages-v1 .package-v1-card ul {
    margin: 0 0 16px;
    padding-top: 15px;
    border-top: 1px solid #e7edf2;
  }

  #packages-v1 .package-v1-card li {
    font-size: 13.5px;
    margin-bottom: 10px;
    padding-left: 22px;
  }

  #packages-v1 .package-v1-fit {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 14px;
    padding-top: 13px;
    font-size: 11.5px;
  }

  #packages-v1 .packages-v1-mobile-hint {
    margin: 4px 20px 0 0;
    text-align: center;
    font-size: 11px;
    letter-spacing: .15px;
  }
}

@media (max-width: 390px) {
  #packages-v1 .packages-v1-head h2 {
    font-size: 31px;
  }

  #packages-v1 .package-v1-card,
  #packages-v1 .package-v1-card:first-child,
  #packages-v1 .package-v1-card:nth-child(3) {
    flex-basis: calc(100vw - 52px);
  }
}

/* =========================================================
   IWIFI PRO — PACKAGES V1.2 MOBILE SWIPE + PAGINATION
   ========================================================= */
#packages-v1 .package-v1-icon svg {
  display: block;
  width: 24px;
  height: 24px
}

#packages-v1 .packages-v1-mobile-nav {
  display: none
}

@media (max-width:767.98px) {
  #packages-v1 .packages-v1-grid {
    gap: 12px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    padding-right: 20px;
  }

  #packages-v1 .package-v1-card,
  #packages-v1 .package-v1-card:first-child,
  #packages-v1 .package-v1-card:nth-child(3) {
    flex: 0 0 calc(100vw - 54px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  #packages-v1 .packages-v1-mobile-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 9px 20px 4px 0;
  }

  #packages-v1 .packages-v1-mobile-nav button {
    appearance: none;
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d5e1ea;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
  }

  #packages-v1 .packages-v1-mobile-nav button.is-active {
    width: 22px;
    background: #00aeef;
  }

  #packages-v1 .packages-v1-mobile-hint {
    margin: 5px 20px 0 0;
    text-align: center;
    color: #8b97a6;
  }
}


/* =========================================================
   WHY IWIFI PRO — PREMIUM EDITORIAL V1
   ========================================================= */
.why-iwifi {
  padding: 110px 0 82px;
  background: #fff;
  color: #0b2748;
  overflow: hidden
}

.why-iwifi * {
  box-sizing: border-box
}

.why-iwifi-head {
  max-width: 900px;
  margin: 0 0 72px
}

.why-iwifi-eyebrow {
  margin-bottom: 18px;
  color: #00aef0;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3.5px
}

.why-iwifi-head h2 {
  margin: 0;
  color: #0a2749;
  font-family: 'Poppins', sans-serif;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -2.6px
}

.why-iwifi-head h2 span {
  color: #00aef0
}

.why-iwifi-head p {
  max-width: 690px;
  margin: 24px 0 0;
  color: #748198;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  line-height: 1.7
}

.why-iwifi-grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  border-top: 1px solid #dce7ef;
  border-bottom: 1px solid #dce7ef
}

.why-iwifi-column {
  position: relative;
  min-width: 0;
  padding: 42px 42px 44px
}

.why-iwifi-column:first-child {
  padding-left: 0;
  padding-right: 48px
}

.why-iwifi-column:last-child {
  padding-right: 0;
  padding-left: 48px
}

.why-iwifi-column+.why-iwifi-column {
  border-left: 1px solid #dce7ef
}

.why-step {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 42px;
  font-family: 'Poppins', sans-serif
}

.why-step span {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8f8fe;
  color: #00aef0;
  font-size: 13px;
  font-weight: 700
}

.why-step b {
  color: #00aef0;
  font-size: 13px;
  letter-spacing: 2.3px
}

.why-iwifi-column h3 {
  margin: 0 0 18px;
  color: #0a2749;
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -1.4px
}

.why-desc {
  min-height: 86px;
  margin: 0 0 30px;
  color: #748198;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.7
}

.why-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px
}

.why-tags span {
  padding: 8px 12px;
  border: 1px solid #dce7ef;
  border-radius: 999px;
  color: #43556e;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap
}

.why-grow {
  background: linear-gradient(180deg, #f4fbff 0%, #fff 100%)
}

.why-kpis {
  display: grid;
  gap: 0
}

.why-kpis>div {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid #dce7ef
}

.why-kpis>div:last-child {
  border-bottom: 1px solid #dce7ef
}

.why-kpis strong {
  min-width: 112px;
  color: #00aef0;
  font-family: 'Poppins', sans-serif;
  font-size: 29px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1px
}

.why-kpis span {
  color: #43556e;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px
}

.why-iwifi-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-top: 34px;
  color: #8290a3;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase
}

.why-iwifi-proof i {
  color: #00aef0;
  font-style: normal;
  font-size: 18px
}

@media(max-width:991.98px) {
  .why-iwifi {
    padding: 82px 0 64px
  }

  .why-iwifi-head {
    margin-bottom: 52px
  }

  .why-iwifi-head h2 {
    font-size: 46px
  }

  .why-iwifi-grid {
    grid-template-columns: 1fr
  }

  .why-iwifi-column,
  .why-iwifi-column:first-child,
  .why-iwifi-column:last-child {
    padding: 36px 0
  }

  .why-iwifi-column+.why-iwifi-column {
    border-left: 0;
    border-top: 1px solid #dce7ef
  }

  .why-grow {
    background: transparent
  }

  .why-desc {
    min-height: 0;
    max-width: 620px
  }

  .why-kpis {
    max-width: 600px
  }
}

@media(max-width:767.98px) {
  .why-iwifi {
    padding: 64px 0 50px
  }

  .why-iwifi .container {
    padding-left: 24px !important;
    padding-right: 24px !important
  }

  .why-iwifi-head {
    margin-bottom: 38px
  }

  .why-iwifi-eyebrow {
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 3px
  }

  .why-iwifi-head h2 {
    font-size: 38px;
    line-height: 1.08;
    letter-spacing: -1.8px
  }

  .why-iwifi-head p {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.65
  }

  .why-iwifi-column,
  .why-iwifi-column:first-child,
  .why-iwifi-column:last-child {
    padding: 30px 0 34px
  }

  .why-step {
    margin-bottom: 25px
  }

  .why-step span {
    width: 36px;
    height: 36px
  }

  .why-iwifi-column h3 {
    font-size: 30px;
    letter-spacing: -1px
  }

  .why-desc {
    margin-bottom: 24px;
    font-size: 14px
  }

  .why-tags {
    gap: 7px
  }

  .why-tags span {
    padding: 7px 10px;
    font-size: 11px
  }

  .why-kpis>div {
    gap: 14px;
    padding: 13px 0
  }

  .why-kpis strong {
    min-width: 102px;
    font-size: 25px
  }

  .why-kpis span {
    font-size: 11px
  }

  .why-iwifi-proof {
    justify-content: flex-start;
    gap: 9px;
    overflow: hidden;
    padding-top: 24px;
    font-size: 9px;
    letter-spacing: .5px;
    white-space: nowrap
  }
}


/* =========================================================
   HOW IWIFI PRO WORKS — PREMIUM WORKFLOW V1
   ========================================================= */
#iwifi-workflow {
  --iwf-navy: #08284b;
  --iwf-blue: #08aceb;
  --iwf-muted: #7f8da3;
  --iwf-line: #dbe9f3;
  padding: 92px 0 96px;
  background: #fff;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

#iwifi-workflow .iwf-head {
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}

#iwifi-workflow .iwf-eyebrow {
  margin-bottom: 14px;
  color: var(--iwf-blue);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 3.2px;
}

#iwifi-workflow .iwf-head h2 {
  margin: 0;
  color: var(--iwf-navy);
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -2.2px;
}

#iwifi-workflow .iwf-head h2 span {
  color: var(--iwf-blue);
}

#iwifi-workflow .iwf-head p {
  max-width: 650px;
  margin: 20px auto 0;
  color: var(--iwf-muted);
  font-size: 17px;
  line-height: 1.7;
}

#iwifi-workflow .iwf-journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
}

#iwifi-workflow .iwf-line {
  position: absolute;
  z-index: 0;
  top: 28px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, #cfe3f0 0%, #86d7f5 70%, #08aceb 100%);
}

#iwifi-workflow .iwf-step {
  position: relative;
  z-index: 1;
  min-width: 0;
}

#iwifi-workflow .iwf-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 28px;
  border: 1px solid #cdeaf7;
  border-radius: 50%;
  background: #effaff;
  color: var(--iwf-blue);
  box-shadow: 0 0 0 10px #fff;
}

#iwifi-workflow .iwf-node span {
  font-size: 14px;
  font-weight: 700;
}

#iwifi-workflow .iwf-label {
  margin-bottom: 12px;
  color: var(--iwf-blue);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.8px;
}

#iwifi-workflow .iwf-copy h3 {
  min-height: 58px;
  margin: 0 0 13px;
  color: var(--iwf-navy);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -.55px;
}

#iwifi-workflow .iwf-copy p {
  margin: 0;
  color: var(--iwf-muted);
  font-size: 14px;
  line-height: 1.65;
}

#iwifi-workflow .iwf-copy p span {
  color: #b5c1cf;
  padding: 0 3px;
}

#iwifi-workflow .iwf-step-final .iwf-node {
  border-color: var(--iwf-blue);
  background: var(--iwf-blue);
  color: #fff;
  box-shadow: 0 0 0 10px #fff, 0 10px 30px rgba(8, 172, 235, .22);
}

#iwifi-workflow .iwf-step-final .iwf-copy h3 {
  color: #057eae;
}

@media (max-width: 991.98px) {
  #iwifi-workflow {
    padding: 72px 0 78px;
  }

  #iwifi-workflow .iwf-head {
    margin-bottom: 54px;
  }

  #iwifi-workflow .iwf-journey {
    gap: 18px;
  }

  #iwifi-workflow .iwf-copy h3 {
    font-size: 18px;
    min-height: 50px;
  }

  #iwifi-workflow .iwf-copy p {
    font-size: 13px;
  }
}

@media (max-width: 767.98px) {
  #iwifi-workflow {
    padding: 58px 0 62px;
    overflow: visible;
  }

  #iwifi-workflow .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  #iwifi-workflow .iwf-head {
    margin: 0 0 44px;
    text-align: left;
  }

  #iwifi-workflow .iwf-eyebrow {
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 2.7px;
  }

  #iwifi-workflow .iwf-head h2 {
    max-width: 330px;
    font-size: 36px;
    line-height: 1.08;
    letter-spacing: -1.5px;
  }

  #iwifi-workflow .iwf-head p {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.65;
  }

  #iwifi-workflow .iwf-journey {
    display: block;
    padding-left: 0;
  }

  #iwifi-workflow .iwf-line {
    top: 26px;
    bottom: 26px;
    left: 25px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, #cfe3f0 0%, #86d7f5 70%, #08aceb 100%);
  }

  #iwifi-workflow .iwf-step {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 22px;
    padding-bottom: 38px;
  }

  #iwifi-workflow .iwf-step:last-child {
    padding-bottom: 0;
  }

  #iwifi-workflow .iwf-node {
    grid-column: 1;
    width: 52px;
    height: 52px;
    margin: 0;
    box-shadow: 0 0 0 7px #fff;
  }

  #iwifi-workflow .iwf-copy {
    grid-column: 2;
    padding-top: 3px;
  }

  #iwifi-workflow .iwf-label {
    margin-bottom: 8px;
  }

  #iwifi-workflow .iwf-copy h3 {
    min-height: 0;
    margin-bottom: 7px;
    font-size: 20px;
    line-height: 1.25;
  }

  #iwifi-workflow .iwf-copy p {
    font-size: 13px;
    line-height: 1.55;
  }

  #iwifi-workflow .iwf-step-final .iwf-node {
    box-shadow: 0 0 0 7px #fff, 0 8px 22px rgba(8, 172, 235, .20);
  }
}


/* =========================================================
   HOW IWIFI PRO WORKS — V2 / ICON JOURNEY
   ========================================================= */
#iwifi-workflow {
  padding: 76px 0 92px;
}

#iwifi-workflow .iwf-head {
  max-width: none;
  margin: 0 auto 66px;
  text-align: center;
}

#iwifi-workflow .iwf-head h2 {
  margin: 0;
  color: var(--iwf-navy);
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1.1px;
}

#iwifi-workflow .iwf-journey {
  gap: 30px;
}

#iwifi-workflow .iwf-line {
  top: 39px;
  left: 6%;
  right: 6%;
  height: 3px;
  border-radius: 10px;
  background: linear-gradient(90deg, #d9eaf4 0%, #9bdcf4 42%, #45c3f1 72%, #08aceb 100%);
}

#iwifi-workflow .iwf-node {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 28px;
  background: #f1fbff;
  border: 1px solid #c7eafa;
  box-shadow: 0 0 0 11px #fff;
}

#iwifi-workflow .iwf-node .iwf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--iwf-blue);
}

#iwifi-workflow .iwf-node .iwf-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#iwifi-workflow .iwf-node>span {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #cceaf7;
  color: var(--iwf-blue);
  font-size: 10px;
  font-weight: 700;
}

#iwifi-workflow .iwf-label {
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 1.7px;
}

#iwifi-workflow .iwf-copy h3 {
  min-height: 56px;
  margin-bottom: 11px;
  font-size: 21px;
}

#iwifi-workflow .iwf-step-final .iwf-node {
  transform: scale(1.08);
  background: var(--iwf-blue);
  color: #fff;
  border-color: var(--iwf-blue);
  box-shadow: 0 0 0 11px #fff, 0 14px 38px rgba(8, 172, 235, .25);
}

#iwifi-workflow .iwf-step-final .iwf-node .iwf-icon {
  color: #fff;
}

#iwifi-workflow .iwf-step-final .iwf-node>span {
  background: var(--iwf-navy);
  border-color: var(--iwf-navy);
  color: #fff;
}

#iwifi-workflow .iwf-step-final .iwf-label,
#iwifi-workflow .iwf-step-final .iwf-copy h3 {
  color: #049bd3;
}

@media (max-width: 767.98px) {
  #iwifi-workflow {
    padding: 52px 0 60px;
  }

  #iwifi-workflow .iwf-head {
    margin: 0 0 44px;
    text-align: left;
  }

  #iwifi-workflow .iwf-head h2 {
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -.8px;
  }

  #iwifi-workflow .iwf-line {
    top: 34px;
    bottom: 30px;
    left: 34px;
    width: 3px;
    height: auto;
  }

  #iwifi-workflow .iwf-step {
    grid-template-columns: 70px 1fr;
    column-gap: 20px;
    padding-bottom: 34px;
  }

  #iwifi-workflow .iwf-node {
    width: 70px;
    height: 70px;
    margin: 0;
    box-shadow: 0 0 0 8px #fff;
  }

  #iwifi-workflow .iwf-node .iwf-icon {
    width: 29px;
    height: 29px;
  }

  #iwifi-workflow .iwf-node>span {
    right: -3px;
    bottom: -3px;
    width: 24px;
    height: 24px;
    font-size: 9px;
  }

  #iwifi-workflow .iwf-copy {
    padding-top: 2px;
  }

  #iwifi-workflow .iwf-copy h3 {
    min-height: 0;
    font-size: 19px;
    margin-bottom: 6px;
  }

  #iwifi-workflow .iwf-step-final .iwf-node {
    transform: none;
    box-shadow: 0 0 0 8px #fff, 0 10px 28px rgba(8, 172, 235, .22);
  }
}


/* =========================================================
   HOW IWIFI PRO WORKS — INFOGRAPHIC V3
   ========================================================= */
#iwifi-workflow.iwf3-section {
  --navy: #08284b;
  --blue: #08aceb;
  --blue2: #45c5f2;
  --soft: #effaff;
  --line: #d6edf7;
  --muted: #7d8ba0;
  position: relative;
  padding: 78px 0 84px;
  background:
    radial-gradient(circle at 50% 44%, rgba(8, 172, 235, .055), transparent 31%),
    #fff;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

#iwifi-workflow .iwf3-head {
  margin: 0 0 64px;
  text-align: center;
}

#iwifi-workflow .iwf3-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1.2px;
}

#iwifi-workflow .iwf3-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

#iwifi-workflow .iwf3-track {
  position: absolute;
  top: 58px;
  left: 7%;
  right: 7%;
  height: 4px;
  border-radius: 99px;
  background: #e5f2f8;
  overflow: hidden;
}

#iwifi-workflow .iwf3-track-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #cceaf6 0%, #8ddcf6 35%, #42c5f2 70%, #08aceb 100%);
}

#iwifi-workflow .iwf3-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}

#iwifi-workflow .iwf3-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin: 0 auto 28px;
}

#iwifi-workflow .iwf3-orbit {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(8, 172, 235, .18);
  border-radius: 50%;
  background: rgba(239, 250, 255, .72);
  box-shadow: 0 12px 36px rgba(8, 40, 75, .05);
}

#iwifi-workflow .iwf3-orbit::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(8, 172, 235, .20);
  border-radius: 50%;
}

#iwifi-workflow .iwf3-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #fff;
  color: var(--blue);
  box-shadow: 0 10px 28px rgba(8, 40, 75, .09);
}

#iwifi-workflow .iwf3-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#iwifi-workflow .iwf3-number {
  position: absolute;
  z-index: 3;
  right: 2px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  border: 4px solid #fff;
  font-size: 10px;
  font-weight: 700;
}

#iwifi-workflow .iwf3-label {
  margin-bottom: 9px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

#iwifi-workflow .iwf3-content h3 {
  max-width: 210px;
  min-height: 56px;
  margin: 0 auto 16px;
  color: var(--navy);
  font-size: 21px;
  line-height: 1.32;
  font-weight: 650;
  letter-spacing: -.55px;
}

#iwifi-workflow .iwf3-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

#iwifi-workflow .iwf3-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #dcebf3;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

#iwifi-workflow .iwf3-step-final .iwf3-visual {
  transform: scale(1.08);
}

#iwifi-workflow .iwf3-step-final .iwf3-orbit {
  border-color: rgba(8, 172, 235, .25);
  background: rgba(8, 172, 235, .10);
  box-shadow: 0 16px 48px rgba(8, 172, 235, .18);
}

#iwifi-workflow .iwf3-step-final .iwf3-icon {
  background: linear-gradient(145deg, #1ab8ef, #049bd3);
  color: #fff;
  box-shadow: 0 14px 34px rgba(8, 172, 235, .30);
}

#iwifi-workflow .iwf3-step-final .iwf3-content h3 {
  color: #049bd3;
}

#iwifi-workflow .iwf3-outcome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  max-width: 900px;
  margin: 58px auto 0;
  padding: 16px 24px;
  border: 1px solid #e0edf4;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 35px rgba(8, 40, 75, .05);
  color: #8190a4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.25px;
}

#iwifi-workflow .iwf3-outcome i {
  color: #b4cfdd;
  font-style: normal;
  font-size: 16px;
}

#iwifi-workflow .iwf3-outcome strong {
  color: var(--blue);
  font-weight: 700;
}

@media (hover:hover) and (min-width:768px) {

  #iwifi-workflow .iwf3-step .iwf3-visual,
  #iwifi-workflow .iwf3-step .iwf3-icon {
    transition: transform .3s ease, box-shadow .3s ease;
  }

  #iwifi-workflow .iwf3-step:hover .iwf3-visual {
    transform: translateY(-7px);
  }

  #iwifi-workflow .iwf3-step-final:hover .iwf3-visual {
    transform: scale(1.08) translateY(-7px);
  }

  #iwifi-workflow .iwf3-step:hover .iwf3-icon {
    box-shadow: 0 16px 34px rgba(8, 172, 235, .16);
  }
}

@media (max-width:767.98px) {
  #iwifi-workflow.iwf3-section {
    padding: 52px 0 58px;
    background: #fff;
  }

  #iwifi-workflow .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  #iwifi-workflow .iwf3-head {
    margin-bottom: 42px;
    text-align: left;
  }

  #iwifi-workflow .iwf3-head h2 {
    font-size: 28px;
    letter-spacing: -.8px;
  }

  #iwifi-workflow .iwf3-flow {
    display: block;
  }

  #iwifi-workflow .iwf3-track {
    top: 42px;
    bottom: 42px;
    left: 45px;
    right: auto;
    width: 3px;
    height: auto;
  }

  #iwifi-workflow .iwf3-step {
    display: grid;
    grid-template-columns: 92px 1fr;
    column-gap: 18px;
    align-items: start;
    padding-bottom: 30px;
    text-align: left;
  }

  #iwifi-workflow .iwf3-step:last-child {
    padding-bottom: 0;
  }

  #iwifi-workflow .iwf3-visual {
    grid-column: 1;
    width: 92px;
    height: 92px;
    margin: 0;
  }

  #iwifi-workflow .iwf3-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  #iwifi-workflow .iwf3-icon svg {
    width: 27px;
    height: 27px;
  }

  #iwifi-workflow .iwf3-number {
    right: 0;
    bottom: 4px;
    width: 30px;
    height: 30px;
    border-width: 3px;
    font-size: 9px;
  }

  #iwifi-workflow .iwf3-content {
    grid-column: 2;
    padding-top: 8px;
  }

  #iwifi-workflow .iwf3-label {
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: 1.6px;
  }

  #iwifi-workflow .iwf3-content h3 {
    max-width: none;
    min-height: 0;
    margin: 0 0 10px;
    font-size: 19px;
  }

  #iwifi-workflow .iwf3-tags {
    justify-content: flex-start;
    gap: 5px;
  }

  #iwifi-workflow .iwf3-tags span {
    min-height: 25px;
    padding: 4px 8px;
    font-size: 10px;
  }

  #iwifi-workflow .iwf3-step-final .iwf3-visual {
    transform: none;
  }

  #iwifi-workflow .iwf3-outcome {
    display: none;
  }
}


/* =========================================================
   HOW IWIFI PRO WORKS — V4 ORBIT INFOGRAPHIC
   Inspired by kinetic/circular infographic composition
   ========================================================= */
#iwifi-workflow.iwf4-section {
  --n: #08294d;
  --c1: #16c7ee;
  --c2: #12aeea;
  --c3: #168bdc;
  --c4: #376fd0;
  --c5: #164fa7;
  --ink: #15314f;
  --muted: #74869b;
  padding: 76px 0 92px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 50% 48%, rgba(22, 199, 238, .10), transparent 24%),
    linear-gradient(180deg, #fff 0%, #f9fdff 100%);
  font-family: 'Poppins', sans-serif;
}

#iwifi-workflow .iwf4-head {
  text-align: center;
  margin-bottom: 24px
}

#iwifi-workflow .iwf4-head h2 {
  margin: 0;
  color: var(--n);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1.2px
}

#iwifi-workflow .iwf4-orbit-wrap {
  width: min(100%, 1120px);
  height: 590px;
  margin: 0 auto;
  position: relative
}

#iwifi-workflow .iwf4-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%
}

#iwifi-workflow .iwf4-orbit-ring {
  position: absolute;
  border-radius: 50%;
  inset: 0;
  border: 2px solid rgba(18, 174, 234, .17)
}

#iwifi-workflow .iwf4-ring-a {
  border-top-color: var(--c1);
  border-right-color: var(--c3);
  border-bottom-color: var(--c5);
  border-left-color: rgba(18, 174, 234, .18)
}

#iwifi-workflow .iwf4-ring-b {
  inset: 34px;
  border: 1px dashed rgba(22, 139, 220, .22)
}

#iwifi-workflow .iwf4-flow-dot {
  position: absolute;
  left: 50%;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c1);
  box-shadow: 0 0 0 7px rgba(22, 199, 238, .12);
  transform-origin: 6px 266px;
  animation: iwf4orbit 12s linear infinite
}

@keyframes iwf4orbit {
  to {
    transform: rotate(360deg)
  }
}

#iwifi-workflow .iwf4-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 238px;
  height: 238px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #0c315c 0%, #0b477d 54%, #0c9ed7 100%);
  box-shadow: 0 30px 70px rgba(8, 41, 77, .22), inset 0 0 0 10px rgba(255, 255, 255, .06)
}

#iwifi-workflow .iwf4-center:before {
  content: "";
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(18, 174, 234, .16);
  border-radius: 50%
}

#iwifi-workflow .iwf4-center-mark {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px)
}

#iwifi-workflow .iwf4-center svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

#iwifi-workflow .iwf4-center strong {
  font-size: 27px;
  line-height: 1;
  font-weight: 700
}

#iwifi-workflow .iwf4-center span {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .4px;
  color: rgba(255, 255, 255, .75)
}

#iwifi-workflow .iwf4-step {
  position: absolute;
  width: 220px;
  text-align: center;
  z-index: 4
}

#iwifi-workflow .iwf4-node {
  width: 92px;
  height: 92px;
  margin: 0 auto 13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  box-shadow: 0 16px 36px rgba(8, 41, 77, .16);
  transition: transform .3s ease, box-shadow .3s ease
}

#iwifi-workflow .iwf4-node:before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(18, 174, 234, .16);
  background: rgba(255, 255, 255, .52);
  z-index: -1
}

#iwifi-workflow .iwf4-node svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

#iwifi-workflow .iwf4-num {
  position: absolute;
  right: -8px;
  top: -7px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--n);
  border: 1px solid rgba(8, 41, 77, .08);
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(8, 41, 77, .10)
}

#iwifi-workflow .iwf4-copy h3 {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: 1.5px
}

#iwifi-workflow .iwf4-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500
}

#iwifi-workflow .iwf4-s1 {
  left: 2%;
  top: 245px
}

#iwifi-workflow .iwf4-s2 {
  left: 18%;
  top: 42px
}

#iwifi-workflow .iwf4-s3 {
  left: 50%;
  top: 4px;
  transform: translateX(-50%)
}

#iwifi-workflow .iwf4-s4 {
  right: 18%;
  top: 42px
}

#iwifi-workflow .iwf4-s5 {
  right: 2%;
  top: 245px
}

#iwifi-workflow .iwf4-s1 .iwf4-node {
  background: linear-gradient(145deg, #22d2ef, #10bce9)
}

#iwifi-workflow .iwf4-s2 .iwf4-node {
  background: linear-gradient(145deg, #19bceb, #129fe3)
}

#iwifi-workflow .iwf4-s3 .iwf4-node {
  background: linear-gradient(145deg, #1d9be1, #177ed3)
}

#iwifi-workflow .iwf4-s4 .iwf4-node {
  background: linear-gradient(145deg, #357fd6, #315fc5)
}

#iwifi-workflow .iwf4-s5 .iwf4-node {
  width: 106px;
  height: 106px;
  background: linear-gradient(145deg, #126ebd, #083d87);
  box-shadow: 0 20px 48px rgba(8, 61, 135, .27)
}

#iwifi-workflow .iwf4-s1 h3 {
  color: #11bde4
}

#iwifi-workflow .iwf4-s2 h3 {
  color: #119fe0
}

#iwifi-workflow .iwf4-s3 h3 {
  color: #177ed3
}

#iwifi-workflow .iwf4-s4 h3 {
  color: #315fc5
}

#iwifi-workflow .iwf4-s5 h3 {
  color: #0c4f9e
}

#iwifi-workflow .iwf4-step:hover .iwf4-node {
  transform: translateY(-7px) scale(1.04);
  box-shadow: 0 22px 46px rgba(8, 41, 77, .22)
}

#iwifi-workflow .iwf4-mobile-flow {
  display: none
}

@media (prefers-reduced-motion:reduce) {
  #iwifi-workflow .iwf4-flow-dot {
    animation: none
  }
}

@media(max-width:991.98px) and (min-width:768px) {
  #iwifi-workflow .iwf4-orbit-wrap {
    transform: scale(.84);
    transform-origin: top center;
    margin-bottom: -85px
  }
}

@media(max-width:767.98px) {
  #iwifi-workflow.iwf4-section {
    padding: 52px 0 60px
  }

  #iwifi-workflow .container {
    padding-left: 22px;
    padding-right: 22px
  }

  #iwifi-workflow .iwf4-head {
    text-align: left;
    margin-bottom: 36px
  }

  #iwifi-workflow .iwf4-head h2 {
    font-size: 28px;
    letter-spacing: -.8px
  }

  #iwifi-workflow .iwf4-orbit-wrap {
    display: none
  }

  #iwifi-workflow .iwf4-mobile-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch
  }

  #iwifi-workflow .iwf4-mobile-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 13px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e2edf4;
    box-shadow: 0 10px 28px rgba(8, 41, 77, .055)
  }

  #iwifi-workflow .iwf4-mobile-item b {
    grid-row: 1/3;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #18c5ed, #1585d8);
    color: #fff;
    font-size: 10px
  }

  #iwifi-workflow .iwf4-mobile-item span {
    color: var(--n);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 1.3px
  }

  #iwifi-workflow .iwf4-mobile-item small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500
  }

  #iwifi-workflow .iwf4-mobile-flow>i {
    height: 23px;
    display: flex;
    align-items: center;
    padding-left: 31px;
    color: #68c9ec;
    font-style: normal;
    font-size: 14px
  }

  #iwifi-workflow .iwf4-mobile-grow {
    background: linear-gradient(135deg, #0b315c, #0c69ae);
    border-color: transparent
  }

  #iwifi-workflow .iwf4-mobile-grow b {
    background: #18c4ed
  }

  #iwifi-workflow .iwf4-mobile-grow span {
    color: #fff
  }

  #iwifi-workflow .iwf4-mobile-grow small {
    color: rgba(255, 255, 255, .72)
  }
}


/* =========================================================
   HOW IWIFI PRO WORKS — V5 GOAL / TARGET INFOGRAPHIC
   ========================================================= */
#iwifi-workflow.iwf5-section {
  --navy: #08294d;
  --cyan: #11b7e8;
  --blue: #1689d5;
  --deep: #125aa7;
  --pale: #e9f8fe;
  --line: #a9dff1;
  --muted: #77899d;
  position: relative;
  overflow: hidden;
  padding: 70px 0 84px;
  background: #fff;
  font-family: 'Poppins', sans-serif
}

#iwifi-workflow .iwf5-head {
  text-align: center;
  margin-bottom: 24px
}

#iwifi-workflow .iwf5-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1.15px
}

#iwifi-workflow .iwf5-stage {
  position: relative;
  width: min(100%, 1080px);
  height: 720px;
  margin: 0 auto
}

/* Central pole */
#iwifi-workflow .iwf5-axis {
  position: absolute;
  left: 50%;
  top: 48px;
  bottom: 116px;
  width: 4px;
  transform: translateX(-50%);
  z-index: 1
}

#iwifi-workflow .iwf5-pole {
  position: absolute;
  left: 0;
  top: 45px;
  bottom: 0;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #10bde9 0%, #178bd4 50%, #0b4f98 100%);
  box-shadow: 0 0 22px rgba(17, 183, 232, .12)
}

#iwifi-workflow .iwf5-flag {
  position: absolute;
  left: 4px;
  top: 0;
  width: 82px;
  height: 58px;
  filter: drop-shadow(0 10px 18px rgba(8, 41, 77, .12))
}

#iwifi-workflow .iwf5-flag span {
  position: absolute;
  top: 0;
  width: 42px;
  height: 54px;
  background: var(--cyan)
}

#iwifi-workflow .iwf5-flag span:first-child {
  left: 0;
  border-radius: 0 0 0 24px;
  clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 72%)
}

#iwifi-workflow .iwf5-flag span:last-child {
  left: 40px;
  background: var(--blue);
  border-radius: 0 0 24px 0;
  clip-path: polygon(0 12%, 100% 0, 100% 72%, 0 100%)
}

/* Steps */
#iwifi-workflow .iwf5-step {
  position: absolute;
  left: 50%;
  width: 760px;
  height: 92px;
  transform: translateX(-50%);
  display: grid;
  align-items: center;
  z-index: 3
}

#iwifi-workflow .iwf5-left {
  grid-template-columns: 280px 120px 88px 272px
}

#iwifi-workflow .iwf5-right {
  grid-template-columns: 272px 88px 120px 280px
}

#iwifi-workflow .iwf5-step-1 {
  top: 145px
}

#iwifi-workflow .iwf5-step-2 {
  top: 238px
}

#iwifi-workflow .iwf5-step-3 {
  top: 331px
}

#iwifi-workflow .iwf5-step-4 {
  top: 424px
}

#iwifi-workflow .iwf5-step-5 {
  top: 517px
}

#iwifi-workflow .iwf5-left .iwf5-copy {
  grid-column: 1;
  text-align: right;
  padding-right: 16px
}

#iwifi-workflow .iwf5-left .iwf5-branch {
  grid-column: 2
}

#iwifi-workflow .iwf5-left .iwf5-icon {
  grid-column: 3
}

#iwifi-workflow .iwf5-right .iwf5-icon {
  grid-column: 2
}

#iwifi-workflow .iwf5-right .iwf5-branch {
  grid-column: 3
}

#iwifi-workflow .iwf5-right .iwf5-copy {
  grid-column: 4;
  text-align: left;
  padding-left: 16px
}

#iwifi-workflow .iwf5-branch {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, var(--line), #48c5ec)
}

#iwifi-workflow .iwf5-right .iwf5-branch {
  background: linear-gradient(90deg, #48c5ec, var(--line))
}

#iwifi-workflow .iwf5-branch:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--cyan);
  box-shadow: 0 0 0 5px #fff
}

#iwifi-workflow .iwf5-left .iwf5-branch:after {
  left: 0
}

#iwifi-workflow .iwf5-right .iwf5-branch:after {
  right: 0
}

#iwifi-workflow .iwf5-branch i {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--navy);
  border: 2px solid #fff
}

#iwifi-workflow .iwf5-left .iwf5-branch i {
  right: -4px
}

#iwifi-workflow .iwf5-right .iwf5-branch i {
  left: -4px
}

#iwifi-workflow .iwf5-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin: auto;
  background: linear-gradient(145deg, #1bc8ec, #148dd7);
  box-shadow: 0 14px 30px rgba(20, 141, 215, .18);
  transition: transform .25s ease, box-shadow .25s ease
}

#iwifi-workflow .iwf5-step:nth-of-type(even) .iwf5-icon {
  background: linear-gradient(145deg, #147fc9, #0c559f)
}

#iwifi-workflow .iwf5-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

#iwifi-workflow .iwf5-grow-icon {
  width: 78px;
  height: 78px;
  background: linear-gradient(145deg, #0d6db8, #073c7c) !important;
  box-shadow: 0 16px 36px rgba(7, 60, 124, .24)
}

#iwifi-workflow .iwf5-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--cyan);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: 1.5px
}

#iwifi-workflow .iwf5-step:nth-of-type(even) .iwf5-kicker {
  color: #176eb8
}

#iwifi-workflow .iwf5-copy h3 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -.35px
}

#iwifi-workflow .iwf5-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 500
}

/* Target */
#iwifi-workflow .iwf5-target {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 470px;
  height: 132px;
  transform: translateX(-50%);
  z-index: 2
}

#iwifi-workflow .iwf5-ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  border-style: solid
}

#iwifi-workflow .iwf5-r1 {
  width: 470px;
  height: 118px;
  border-width: 20px;
  border-color: #0d69b1;
  background: #eaf8fe;
  box-shadow: 0 20px 38px rgba(8, 41, 77, .13)
}

#iwifi-workflow .iwf5-r2 {
  width: 325px;
  height: 82px;
  bottom: 18px;
  border-width: 18px;
  border-color: #27bde8;
  background: #fff
}

#iwifi-workflow .iwf5-r3 {
  width: 190px;
  height: 48px;
  bottom: 35px;
  border-width: 14px;
  border-color: #0d69b1;
  background: #e9f9fe
}

#iwifi-workflow .iwf5-bullseye {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  width: 112px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 8px 18px rgba(8, 41, 77, .2)
}

#iwifi-workflow .iwf5-bullseye strong {
  font-size: 10px;
  letter-spacing: 1px
}

#iwifi-workflow .iwf5-bullseye span {
  font-size: 7px;
  color: rgba(255, 255, 255, .68)
}

#iwifi-workflow .iwf5-step:hover .iwf5-icon {
  transform: scale(1.08);
  box-shadow: 0 20px 40px rgba(20, 141, 215, .25)
}

@media(max-width:767.98px) {
  #iwifi-workflow.iwf5-section {
    padding: 50px 0 58px
  }

  #iwifi-workflow .container {
    padding-left: 20px;
    padding-right: 20px
  }

  #iwifi-workflow .iwf5-head {
    text-align: left;
    margin-bottom: 32px
  }

  #iwifi-workflow .iwf5-head h2 {
    font-size: 28px;
    letter-spacing: -.8px
  }

  #iwifi-workflow .iwf5-stage {
    width: 100%;
    height: auto;
    padding: 10px 0 148px
  }

  #iwifi-workflow .iwf5-axis {
    left: 34px;
    top: 15px;
    bottom: 110px;
    transform: none
  }

  #iwifi-workflow .iwf5-flag {
    display: none
  }

  #iwifi-workflow .iwf5-pole {
    top: 0;
    width: 3px
  }

  #iwifi-workflow .iwf5-step,
  #iwifi-workflow .iwf5-left,
  #iwifi-workflow .iwf5-right {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    transform: none;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 15px;
    margin-bottom: 24px
  }

  #iwifi-workflow .iwf5-branch {
    display: none
  }

  #iwifi-workflow .iwf5-left .iwf5-icon,
  #iwifi-workflow .iwf5-right .iwf5-icon {
    grid-column: 1;
    grid-row: 1;
    width: 68px;
    height: 68px;
    margin: 0;
    z-index: 2
  }

  #iwifi-workflow .iwf5-left .iwf5-copy,
  #iwifi-workflow .iwf5-right .iwf5-copy {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding: 5px 0 0
  }

  #iwifi-workflow .iwf5-copy h3 {
    font-size: 17px
  }

  #iwifi-workflow .iwf5-copy p {
    font-size: 10px
  }

  #iwifi-workflow .iwf5-target {
    width: 270px;
    height: 86px;
    bottom: 0
  }

  #iwifi-workflow .iwf5-r1 {
    width: 270px;
    height: 72px;
    border-width: 12px
  }

  #iwifi-workflow .iwf5-r2 {
    width: 188px;
    height: 50px;
    bottom: 11px;
    border-width: 10px
  }

  #iwifi-workflow .iwf5-r3 {
    width: 108px;
    height: 29px;
    bottom: 21px;
    border-width: 8px
  }

  #iwifi-workflow .iwf5-bullseye {
    width: 78px;
    height: 28px;
    bottom: 27px
  }

  #iwifi-workflow .iwf5-bullseye strong {
    font-size: 8px
  }

  #iwifi-workflow .iwf5-bullseye span {
    display: none
  }
}


/* =========================================================
   V5.1 REFINED — cleaner goal infographic proportions
   ========================================================= */
#iwifi-workflow.iwf5-section {
  padding: 64px 0 76px;
  background:
    radial-gradient(circle at 50% 45%, rgba(17, 183, 232, .055), transparent 27%),
    #fff;
}

#iwifi-workflow .iwf5-head {
  margin-bottom: 32px;
}

#iwifi-workflow .iwf5-head h2 {
  font-size: 34px;
  letter-spacing: -1px;
}

#iwifi-workflow .iwf5-stage {
  width: min(100%, 1040px);
  height: 650px;
}

/* shorter, cleaner central axis */
#iwifi-workflow .iwf5-axis {
  top: 42px;
  bottom: 104px;
  width: 3px;
}

#iwifi-workflow .iwf5-pole {
  top: 38px;
  width: 3px;
  background: linear-gradient(180deg, #1cc3e8 0%, #168fd2 55%, #105d9f 100%);
  box-shadow: none;
}

/* smaller flag, integrated with the composition */
#iwifi-workflow .iwf5-flag {
  left: 3px;
  width: 68px;
  height: 48px;
  filter: drop-shadow(0 8px 14px rgba(8, 41, 77, .09));
}

#iwifi-workflow .iwf5-flag span {
  width: 35px;
  height: 45px;
}

#iwifi-workflow .iwf5-flag span:first-child {
  border-radius: 0 0 0 18px;
}

#iwifi-workflow .iwf5-flag span:last-child {
  left: 33px;
  border-radius: 0 0 18px 0;
}

/* more compact alternating steps */
#iwifi-workflow .iwf5-step {
  width: 720px;
  height: 78px;
}

#iwifi-workflow .iwf5-left {
  grid-template-columns: 265px 105px 76px 274px;
}

#iwifi-workflow .iwf5-right {
  grid-template-columns: 274px 76px 105px 265px;
}

#iwifi-workflow .iwf5-step-1 {
  top: 128px
}

#iwifi-workflow .iwf5-step-2 {
  top: 212px
}

#iwifi-workflow .iwf5-step-3 {
  top: 296px
}

#iwifi-workflow .iwf5-step-4 {
  top: 380px
}

#iwifi-workflow .iwf5-step-5 {
  top: 464px
}

#iwifi-workflow .iwf5-left .iwf5-copy {
  padding-right: 14px
}

#iwifi-workflow .iwf5-right .iwf5-copy {
  padding-left: 14px
}

#iwifi-workflow .iwf5-icon,
#iwifi-workflow .iwf5-grow-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(145deg, #20c5e8, #168fd2) !important;
  box-shadow: 0 10px 24px rgba(20, 141, 215, .14);
}

#iwifi-workflow .iwf5-step-2 .iwf5-icon,
#iwifi-workflow .iwf5-step-4 .iwf5-icon {
  background: linear-gradient(145deg, #198fd0, #1267ad) !important;
}

#iwifi-workflow .iwf5-step-5 .iwf5-icon {
  background: linear-gradient(145deg, #1268ad, #093e7d) !important;
}

#iwifi-workflow .iwf5-icon svg {
  width: 27px;
  height: 27px;
}

#iwifi-workflow .iwf5-branch {
  height: 1px;
  background: #8bd6ed;
}

#iwifi-workflow .iwf5-right .iwf5-branch {
  background: #8bd6ed;
}

#iwifi-workflow .iwf5-branch:after {
  width: 7px;
  height: 7px;
  background: #17b7df;
  box-shadow: 0 0 0 4px #fff;
}

#iwifi-workflow .iwf5-branch i {
  width: 6px;
  height: 6px;
  background: #0c477f;
}

#iwifi-workflow .iwf5-kicker {
  margin-bottom: 3px;
  color: #11aeda;
  font-size: 10px;
  letter-spacing: 1.4px;
}

#iwifi-workflow .iwf5-step:nth-of-type(even) .iwf5-kicker {
  color: #1673b8;
}

#iwifi-workflow .iwf5-copy h3 {
  margin-bottom: 3px;
  font-size: 16px;
  line-height: 1.22;
  font-weight: 650;
  letter-spacing: -.3px;
}

#iwifi-workflow .iwf5-copy p {
  font-size: 10px;
  color: #7d8da0;
}

/* Replace oversized target with a lighter, dimensional bullseye */
#iwifi-workflow .iwf5-target {
  bottom: 4px;
  width: 360px;
  height: 98px;
}

#iwifi-workflow .iwf5-r1 {
  width: 360px;
  height: 88px;
  border-width: 12px;
  border-color: #126caf;
  background: #f3fbfe;
  box-shadow: 0 14px 28px rgba(8, 41, 77, .09);
}

#iwifi-workflow .iwf5-r2 {
  width: 250px;
  height: 61px;
  bottom: 13px;
  border-width: 10px;
  border-color: #28bce4;
  background: #fff;
}

#iwifi-workflow .iwf5-r3 {
  width: 145px;
  height: 36px;
  bottom: 26px;
  border-width: 8px;
  border-color: #126caf;
  background: #effaff;
}

#iwifi-workflow .iwf5-bullseye {
  bottom: 31px;
  width: 96px;
  height: 31px;
  background: #082f5c;
  box-shadow: 0 6px 14px rgba(8, 41, 77, .16);
}

#iwifi-workflow .iwf5-bullseye strong {
  font-size: 9px;
  letter-spacing: 1px;
}

#iwifi-workflow .iwf5-bullseye span {
  font-size: 6px;
}

/* subtle landing point where pole meets target */
#iwifi-workflow .iwf5-target:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #0f67aa;
  box-shadow: 0 0 0 6px rgba(17, 183, 232, .10);
  z-index: 5;
}

@media(max-width:767.98px) {
  #iwifi-workflow.iwf5-section {
    padding: 48px 0 54px
  }

  #iwifi-workflow .iwf5-head {
    margin-bottom: 30px
  }

  #iwifi-workflow .iwf5-head h2 {
    font-size: 27px
  }

  #iwifi-workflow .iwf5-stage {
    height: auto;
    padding: 6px 0 125px
  }

  #iwifi-workflow .iwf5-axis {
    left: 30px;
    top: 8px;
    bottom: 96px
  }

  #iwifi-workflow .iwf5-step,
  #iwifi-workflow .iwf5-left,
  #iwifi-workflow .iwf5-right {
    grid-template-columns: 60px 1fr;
    gap: 14px;
    margin-bottom: 21px;
  }

  #iwifi-workflow .iwf5-left .iwf5-icon,
  #iwifi-workflow .iwf5-right .iwf5-icon {
    width: 60px;
    height: 60px;
  }

  #iwifi-workflow .iwf5-copy h3 {
    font-size: 16px
  }

  #iwifi-workflow .iwf5-target {
    width: 230px;
    height: 70px;
  }

  #iwifi-workflow .iwf5-r1 {
    width: 230px;
    height: 58px;
    border-width: 9px
  }

  #iwifi-workflow .iwf5-r2 {
    width: 160px;
    height: 40px;
    bottom: 9px;
    border-width: 8px
  }

  #iwifi-workflow .iwf5-r3 {
    width: 92px;
    height: 23px;
    bottom: 17px;
    border-width: 6px
  }

  #iwifi-workflow .iwf5-bullseye {
    width: 70px;
    height: 24px;
    bottom: 19px
  }
}


/* =========================================================
   V5.2 — AXIS / FLAG GEOMETRY FIX
   Flag is centered ON the pole; pole starts inside the flag notch.
   ========================================================= */
#iwifi-workflow .iwf5-axis {
  left: 50%;
  top: 38px;
  bottom: 104px;
  width: 4px;
  transform: translateX(-50%);
  z-index: 2;
}

/* The pole itself owns the exact x-axis. */
#iwifi-workflow .iwf5-pole {
  position: absolute;
  left: 50%;
  top: 42px;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #19bce6 0%, #168bd0 52%, #0e5b9d 100%);
}

/* Flag is now centered around the same x-axis, not offset to its right. */
#iwifi-workflow .iwf5-flag {
  position: absolute;
  left: 50%;
  top: 0;
  width: 78px;
  height: 58px;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 14px rgba(8, 41, 77, .09));
  z-index: 3;
}

#iwifi-workflow .iwf5-flag span {
  position: absolute;
  top: 0;
  width: 39px;
  height: 54px;
}

#iwifi-workflow .iwf5-flag-left {
  left: 0 !important;
  background: #19bce6 !important;
  border-radius: 3px 0 0 20px !important;
  clip-path: polygon(0 0, 100% 13%, 100% 100%, 0 72%) !important;
}

#iwifi-workflow .iwf5-flag-right {
  left: 39px !important;
  background: #1988cf !important;
  border-radius: 0 3px 20px 0 !important;
  clip-path: polygon(0 13%, 100% 0, 100% 72%, 0 100%) !important;
}

/* Small center seam visually locks flag to the pole. */
#iwifi-workflow .iwf5-flag:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  bottom: 5px;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(8, 41, 77, .16);
  border-radius: 999px;
}

/* Bottom cap sits exactly on the target center. */
#iwifi-workflow .iwf5-pole-cap {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #0e63a7;
  border: 4px solid #e9f8fe;
  box-sizing: content-box;
  z-index: 5;
}

/* Every horizontal branch terminates exactly at the same central axis. */
#iwifi-workflow .iwf5-step {
  left: 50%;
}

#iwifi-workflow .iwf5-left .iwf5-branch,
#iwifi-workflow .iwf5-right .iwf5-branch {
  position: relative;
}

#iwifi-workflow .iwf5-left .iwf5-branch:before,
#iwifi-workflow .iwf5-right .iwf5-branch:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 1px;
  background: #8bd6ed;
  transform: translateY(-50%);
}

#iwifi-workflow .iwf5-left .iwf5-branch:before {
  right: -10px
}

#iwifi-workflow .iwf5-right .iwf5-branch:before {
  left: -10px
}

/* Remove the previous target pseudo-dot; pole-cap is now the single connection point. */
#iwifi-workflow .iwf5-target:before {
  display: none !important;
}

@media(max-width:767.98px) {
  #iwifi-workflow .iwf5-axis {
    left: 30px;
    top: 8px;
    bottom: 96px;
    transform: none;
    width: 3px;
  }

  #iwifi-workflow .iwf5-pole {
    left: 50%;
    top: 0;
    width: 3px;
  }

  #iwifi-workflow .iwf5-pole-cap {
    left: 50%;
    bottom: -4px;
    width: 10px;
    height: 10px;
    border-width: 3px;
  }
}


/* =========================================================
   HOW IWIFI PRO WORKS — V6 TARGET INFOGRAPHIC
   ========================================================= */
#iwifi-workflow.iwf6-section {
  --n: #08294d;
  --c: #14b9e7;
  --b: #167fc8;
  --deep: #0b559d;
  --muted: #7c8da1;
  padding: 72px 0 82px;
  background:
    radial-gradient(circle at 27% 48%, rgba(20, 185, 231, .065), transparent 26%), #fff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden
}

#iwifi-workflow .iwf6-head {
  text-align: center;
  margin-bottom: 52px
}

#iwifi-workflow .iwf6-head h2 {
  margin: 0;
  color: var(--n);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1.1px
}

#iwifi-workflow .iwf6-layout {
  display: grid;
  grid-template-columns: 43% 57%;
  align-items: center;
  max-width: 1120px;
  margin: auto
}

#iwifi-workflow .iwf6-goal {
  text-align: center
}

#iwifi-workflow .iwf6-target {
  position: relative;
  width: 390px;
  height: 390px;
  margin: auto
}

#iwifi-workflow .iwf6-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  margin: auto
}

#iwifi-workflow .iwf6-target .r1 {
  width: 350px;
  height: 350px;
  background: var(--deep);
  box-shadow: 0 28px 55px rgba(8, 41, 77, .13)
}

#iwifi-workflow .iwf6-target .r2 {
  width: 282px;
  height: 282px;
  top: 34px;
  left: 34px;
  background: #fff
}

#iwifi-workflow .iwf6-target .r3 {
  width: 210px;
  height: 210px;
  top: 70px;
  left: 70px;
  background: var(--c)
}

#iwifi-workflow .iwf6-target .r4 {
  width: 130px;
  height: 130px;
  top: 110px;
  left: 110px;
  background: #fff
}

#iwifi-workflow .iwf6-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--n);
  color: #fff;
  z-index: 3;
  box-shadow: 0 10px 25px rgba(8, 41, 77, .22)
}

#iwifi-workflow .iwf6-center strong {
  font-size: 10px;
  letter-spacing: 1px
}

#iwifi-workflow .iwf6-center span {
  font-size: 6px;
  color: rgba(255, 255, 255, .65)
}

#iwifi-workflow .iwf6-arrow {
  position: absolute;
  left: 183px;
  top: 179px;
  width: 145px;
  height: 26px;
  z-index: 4;
  transform: rotate(-18deg);
  transform-origin: left center
}

#iwifi-workflow .iwf6-arrow-line {
  position: absolute;
  left: 0;
  top: 10px;
  width: 123px;
  height: 7px;
  border-radius: 8px;
  background: linear-gradient(90deg, #9bb2c2, #526c80);
  box-shadow: 0 5px 10px rgba(8, 41, 77, .12)
}

#iwifi-workflow .iwf6-arrow-head {
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 28px solid #526c80
}

#iwifi-workflow .iwf6-goal-caption {
  margin-top: -4px
}

#iwifi-workflow .iwf6-goal-caption span {
  display: block;
  color: var(--c);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.8px;
  margin-bottom: 5px
}

#iwifi-workflow .iwf6-goal-caption strong {
  color: var(--n);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 650
}

#iwifi-workflow .iwf6-steps {
  padding-left: 34px
}

#iwifi-workflow .iwf6-step {
  display: grid;
  grid-template-columns: 34px 62px 74px 1fr;
  align-items: center;
  min-height: 92px;
  position: relative
}

#iwifi-workflow .iwf6-num {
  color: #a8b8c5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px
}

#iwifi-workflow .iwf6-icon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, #20c4e8, #1689cf);
  box-shadow: 0 10px 24px rgba(20, 137, 207, .15)
}

#iwifi-workflow .iwf6-step:nth-child(even) .iwf6-icon {
  background: linear-gradient(145deg, #1687cb, #1162a8)
}

#iwifi-workflow .iwf6-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

#iwifi-workflow .iwf6-line {
  height: 1px;
  background: #b9ddea;
  position: relative;
  margin: 0 12px
}

#iwifi-workflow .iwf6-line i {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--c)
}

#iwifi-workflow .iwf6-copy {
  padding-left: 4px
}

#iwifi-workflow .iwf6-copy h3 {
  margin: 0 0 4px;
  color: var(--n);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .8px
}

#iwifi-workflow .iwf6-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 500
}

#iwifi-workflow .iwf6-step.s5 .iwf6-num,
#iwifi-workflow .iwf6-step.s5 h3 {
  color: var(--c)
}

#iwifi-workflow .iwf6-step.s5 .iwf6-icon {
  background: linear-gradient(145deg, #1169ae, #083d7c);
  transform: scale(1.08)
}

#iwifi-workflow .iwf6-step {
  transition: transform .25s ease
}

#iwifi-workflow .iwf6-step:hover {
  transform: translateX(6px)
}

@media(max-width:991.98px) and (min-width:768px) {
  #iwifi-workflow .iwf6-layout {
    grid-template-columns: 45% 55%
  }

  #iwifi-workflow .iwf6-target {
    transform: scale(.82);
    margin-left: -10px;
    margin-right: -10px
  }

  #iwifi-workflow .iwf6-steps {
    padding-left: 5px
  }
}

@media(max-width:767.98px) {
  #iwifi-workflow.iwf6-section {
    padding: 50px 0 58px
  }

  #iwifi-workflow .container {
    padding-left: 20px;
    padding-right: 20px
  }

  #iwifi-workflow .iwf6-head {
    text-align: left;
    margin-bottom: 32px
  }

  #iwifi-workflow .iwf6-head h2 {
    font-size: 28px;
    letter-spacing: -.8px
  }

  #iwifi-workflow .iwf6-layout {
    display: block
  }

  #iwifi-workflow .iwf6-goal {
    margin-bottom: 34px
  }

  #iwifi-workflow .iwf6-target {
    width: 250px;
    height: 250px
  }

  #iwifi-workflow .iwf6-target .r1 {
    width: 230px;
    height: 230px
  }

  #iwifi-workflow .iwf6-target .r2 {
    width: 184px;
    height: 184px;
    top: 23px;
    left: 23px
  }

  #iwifi-workflow .iwf6-target .r3 {
    width: 136px;
    height: 136px;
    top: 47px;
    left: 47px
  }

  #iwifi-workflow .iwf6-target .r4 {
    width: 84px;
    height: 84px;
    top: 73px;
    left: 73px
  }

  #iwifi-workflow .iwf6-center {
    width: 56px;
    height: 56px
  }

  #iwifi-workflow .iwf6-arrow {
    left: 116px;
    top: 114px;
    width: 96px;
    transform: rotate(-18deg) scale(.72);
    transform-origin: left center
  }

  #iwifi-workflow .iwf6-goal-caption strong {
    font-size: 16px
  }

  #iwifi-workflow .iwf6-steps {
    padding-left: 0
  }

  #iwifi-workflow .iwf6-step {
    grid-template-columns: 28px 52px 42px 1fr;
    min-height: 80px
  }

  #iwifi-workflow .iwf6-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px
  }

  #iwifi-workflow .iwf6-icon svg {
    width: 22px;
    height: 22px
  }

  #iwifi-workflow .iwf6-line {
    margin: 0 7px
  }

  #iwifi-workflow .iwf6-copy h3 {
    font-size: 15px
  }

  #iwifi-workflow .iwf6-copy p {
    font-size: 10px
  }
}


/* =========================================================
   HOW IWIFI PRO WORKS — V7 / REFERENCE-MATCHED COMPOSITION
   Large target left + dotted arc + process rows right
   ========================================================= */
#iwifi-workflow.iwf7-section {
  --navy: #08294d;
  --cyan: #12b9e7;
  --blue: #1684cb;
  --deep: #0c5b9f;
  --muted: #7c8b9c;
  --line: #d3e3eb;
  padding: 66px 0 76px;
  background: linear-gradient(180deg, #fff, #fbfdfe);
  font-family: 'Poppins', sans-serif;
  overflow: hidden
}

#iwifi-workflow .iwf7-head {
  margin-bottom: 34px
}

#iwifi-workflow .iwf7-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1px
}

#iwifi-workflow .iwf7-board {
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
  width: min(100%, 1120px);
  min-height: 560px;
  margin: 0 auto
}

/* TARGET */
#iwifi-workflow .iwf7-target-zone {
  position: relative;
  height: 540px
}

#iwifi-workflow .iwf7-target {
  position: absolute;
  left: 28px;
  top: 34px;
  width: 390px;
  height: 390px;
  transform: rotateY(-18deg) rotateZ(-2deg);
  transform-style: preserve-3d
}

#iwifi-workflow .iwf7-disc {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset -15px -5px 0 rgba(5, 53, 91, .08)
}

#iwifi-workflow .iwf7-disc.d1 {
  width: 390px;
  height: 390px;
  background: #0b5a9d;
  box-shadow: -15px 14px 0 #073f70, 0 24px 45px rgba(8, 41, 77, .13)
}

#iwifi-workflow .iwf7-disc.d2 {
  width: 315px;
  height: 315px;
  background: #fff
}

#iwifi-workflow .iwf7-disc.d3 {
  width: 240px;
  height: 240px;
  background: #15b9e4
}

#iwifi-workflow .iwf7-disc.d4 {
  width: 160px;
  height: 160px;
  background: #fff
}

#iwifi-workflow .iwf7-disc.d5 {
  width: 82px;
  height: 82px;
  background: var(--navy);
  box-shadow: inset -7px -3px 0 rgba(0, 0, 0, .12)
}

#iwifi-workflow .iwf7-target-shadow {
  position: absolute;
  left: 110px;
  top: 450px;
  width: 235px;
  height: 28px;
  border-radius: 50%;
  background: rgba(8, 41, 77, .11);
  filter: blur(8px)
}

/* dart crossing the bullseye */
#iwifi-workflow .iwf7-dart {
  position: absolute;
  left: 190px;
  top: 187px;
  width: 220px;
  height: 30px;
  transform: rotate(-13deg);
  transform-origin: left center;
  z-index: 9
}

#iwifi-workflow .iwf7-shaft {
  position: absolute;
  left: 0;
  top: 12px;
  width: 175px;
  height: 7px;
  border-radius: 8px;
  background: linear-gradient(180deg, #a9bbc7, #5e7280);
  box-shadow: 0 4px 8px rgba(8, 41, 77, .16)
}

#iwifi-workflow .iwf7-tip {
  position: absolute;
  left: -20px;
  top: 7px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 24px solid #455d6d
}

#iwifi-workflow .iwf7-fin {
  position: absolute;
  right: 16px;
  width: 42px;
  height: 18px;
  background: #12b9e7
}

#iwifi-workflow .iwf7-fin.f1 {
  top: 0;
  clip-path: polygon(0 55%, 100% 0, 75% 100%, 0 78%)
}

#iwifi-workflow .iwf7-fin.f2 {
  top: 16px;
  background: #1684cb;
  clip-path: polygon(0 15%, 75% 0, 100% 100%, 0 45%)
}

#iwifi-workflow .iwf7-goal-label {
  position: absolute;
  left: 66px;
  top: 482px;
  width: 320px;
  text-align: center
}

#iwifi-workflow .iwf7-goal-label span {
  display: block;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 1.7px
}

#iwifi-workflow .iwf7-goal-label strong {
  display: block;
  margin-top: 3px;
  color: var(--navy);
  font-size: 17px;
  letter-spacing: .4px
}

/* PROCESS / DOTTED ARC */
#iwifi-workflow .iwf7-process {
  position: relative;
  height: 520px;
  padding-left: 48px
}

#iwifi-workflow .iwf7-arc {
  position: absolute;
  left: -42px;
  top: 5px;
  width: 150px;
  height: 500px;
  border: 2px dashed #dce6eb;
  border-left: 0;
  border-radius: 0 150px 150px 0;
  opacity: .95
}

#iwifi-workflow .iwf7-row {
  position: absolute;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 38px 62px 100px minmax(0, 1fr);
  align-items: center
}

#iwifi-workflow .iwf7-row.row1 {
  top: 18px
}

#iwifi-workflow .iwf7-row.row2 {
  top: 118px
}

#iwifi-workflow .iwf7-row.row3 {
  top: 218px
}

#iwifi-workflow .iwf7-row.row4 {
  top: 318px
}

#iwifi-workflow .iwf7-row.row5 {
  top: 418px
}

#iwifi-workflow .iwf7-index {
  color: #91a2b1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px
}

#iwifi-workflow .iwf7-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, #1cc3e8, #1686cc);
  box-shadow: 0 8px 18px rgba(20, 137, 207, .14)
}

#iwifi-workflow .iwf7-row:nth-child(odd) .iwf7-icon {
  background: linear-gradient(145deg, #1686cc, #0d5d9f)
}

#iwifi-workflow .iwf7-row.row5 .iwf7-icon {
  background: linear-gradient(145deg, #126daf, #073e7c)
}

#iwifi-workflow .iwf7-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

#iwifi-workflow .iwf7-connector {
  height: 1px;
  background: #ccdce4;
  position: relative;
  margin: 0 12px
}

#iwifi-workflow .iwf7-connector i {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #c4d5dd
}

#iwifi-workflow .iwf7-connector i:first-child {
  left: -2px
}

#iwifi-workflow .iwf7-connector i:last-child {
  right: -2px
}

#iwifi-workflow .iwf7-copy {
  padding-left: 8px
}

#iwifi-workflow .iwf7-copy h3 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .7px
}

#iwifi-workflow .iwf7-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 500
}

#iwifi-workflow .iwf7-row.row5 h3 {
  color: var(--cyan)
}

@media(max-width:991.98px) and (min-width:768px) {
  #iwifi-workflow .iwf7-board {
    grid-template-columns: 43% 57%
  }

  #iwifi-workflow .iwf7-target-zone {
    transform: scale(.78);
    transform-origin: left center
  }

  #iwifi-workflow .iwf7-process {
    padding-left: 12px
  }
}

@media(max-width:767.98px) {
  #iwifi-workflow.iwf7-section {
    padding: 50px 0 58px
  }

  #iwifi-workflow .container {
    padding-left: 20px;
    padding-right: 20px
  }

  #iwifi-workflow .iwf7-head {
    margin-bottom: 28px
  }

  #iwifi-workflow .iwf7-head h2 {
    font-size: 28px;
    letter-spacing: -.8px
  }

  #iwifi-workflow .iwf7-board {
    display: block;
    min-height: 0
  }

  #iwifi-workflow .iwf7-target-zone {
    height: 350px
  }

  #iwifi-workflow .iwf7-target {
    left: 50%;
    top: 0;
    width: 280px;
    height: 280px;
    transform: translateX(-50%) rotateY(-12deg) rotateZ(-2deg)
  }

  #iwifi-workflow .iwf7-disc.d1 {
    width: 280px;
    height: 280px
  }

  #iwifi-workflow .iwf7-disc.d2 {
    width: 226px;
    height: 226px
  }

  #iwifi-workflow .iwf7-disc.d3 {
    width: 172px;
    height: 172px
  }

  #iwifi-workflow .iwf7-disc.d4 {
    width: 114px;
    height: 114px
  }

  #iwifi-workflow .iwf7-disc.d5 {
    width: 58px;
    height: 58px
  }

  #iwifi-workflow .iwf7-dart {
    left: 136px;
    top: 133px;
    transform: rotate(-13deg) scale(.72);
    transform-origin: left center
  }

  #iwifi-workflow .iwf7-target-shadow {
    left: 50%;
    top: 292px;
    width: 175px;
    transform: translateX(-50%)
  }

  #iwifi-workflow .iwf7-goal-label {
    left: 50%;
    top: 315px;
    width: 260px;
    transform: translateX(-50%)
  }

  #iwifi-workflow .iwf7-process {
    height: auto;
    padding: 10px 0 0 0
  }

  #iwifi-workflow .iwf7-arc {
    display: none
  }

  #iwifi-workflow .iwf7-row,
  #iwifi-workflow .iwf7-row.row1,
  #iwifi-workflow .iwf7-row.row2,
  #iwifi-workflow .iwf7-row.row3,
  #iwifi-workflow .iwf7-row.row4,
  #iwifi-workflow .iwf7-row.row5 {
    position: relative;
    top: auto;
    left: auto;
    grid-template-columns: 28px 50px 38px 1fr;
    min-height: 78px
  }

  #iwifi-workflow .iwf7-icon {
    width: 44px;
    height: 44px
  }

  #iwifi-workflow .iwf7-connector {
    margin: 0 6px
  }

  #iwifi-workflow .iwf7-copy h3 {
    font-size: 14px
  }

  #iwifi-workflow .iwf7-copy p {
    font-size: 10px
  }
}


/* =========================================================
   V7.1 — SEQUENCED WORKFLOW + TARGET ANIMATION
   CONNECT → IDENTIFY → ENGAGE → RETAIN → GROW → BULLSEYE
   ========================================================= */

/* Target breathing: subtle, not spinning */
#iwifi-workflow .iwf7-disc.d1 {
  animation: iwf7OuterPulse 6s ease-in-out infinite;
}

#iwifi-workflow .iwf7-disc.d3 {
  animation: iwf7InnerPulse 6s ease-in-out .35s infinite;
}

#iwifi-workflow .iwf7-disc.d5 {
  animation: iwf7Bullseye 6s ease-in-out 4.8s infinite;
}

/* Give the dashed arc a soft living quality */
#iwifi-workflow .iwf7-arc {
  animation: iwf7ArcBreath 4.8s ease-in-out infinite;
}

/* Each process row lights up in sequence */
#iwifi-workflow .iwf7-row .iwf7-icon,
#iwifi-workflow .iwf7-row .iwf7-index,
#iwifi-workflow .iwf7-row .iwf7-copy h3,
#iwifi-workflow .iwf7-row .iwf7-connector {
  transition: transform .28s ease, opacity .28s ease, box-shadow .28s ease,
    color .28s ease, background .28s ease;
}

#iwifi-workflow .iwf7-row.row1 .iwf7-icon {
  animation: iwf7StepPulse 6s ease-in-out 0s infinite;
}

#iwifi-workflow .iwf7-row.row2 .iwf7-icon {
  animation: iwf7StepPulse 6s ease-in-out .9s infinite;
}

#iwifi-workflow .iwf7-row.row3 .iwf7-icon {
  animation: iwf7StepPulse 6s ease-in-out 1.8s infinite;
}

#iwifi-workflow .iwf7-row.row4 .iwf7-icon {
  animation: iwf7StepPulse 6s ease-in-out 2.7s infinite;
}

#iwifi-workflow .iwf7-row.row5 .iwf7-icon {
  animation: iwf7StepPulse 6s ease-in-out 3.6s infinite;
}

#iwifi-workflow .iwf7-row.row1 .iwf7-connector::after {
  animation-delay: 0s;
}

#iwifi-workflow .iwf7-row.row2 .iwf7-connector::after {
  animation-delay: .9s;
}

#iwifi-workflow .iwf7-row.row3 .iwf7-connector::after {
  animation-delay: 1.8s;
}

#iwifi-workflow .iwf7-row.row4 .iwf7-connector::after {
  animation-delay: 2.7s;
}

#iwifi-workflow .iwf7-row.row5 .iwf7-connector::after {
  animation-delay: 3.6s;
}

/* Moving highlight across each horizontal connector */
#iwifi-workflow .iwf7-connector {
  overflow: hidden;
}

#iwifi-workflow .iwf7-connector::after {
  content: "";
  position: absolute;
  left: -35%;
  top: 0;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #12b9e7, transparent);
  animation: iwf7ConnectorFlow 6s ease-in-out infinite;
}

/* Dart settles into the bullseye once per cycle */
#iwifi-workflow .iwf7-dart {
  animation: iwf7DartHit 6s cubic-bezier(.22, .8, .35, 1) 4.45s infinite;
}

/* tiny impact halo behind the center */
#iwifi-workflow .iwf7-disc.d5::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(18, 185, 231, .38);
  opacity: 0;
  animation: iwf7ImpactRing 6s ease-out 4.8s infinite;
}

@keyframes iwf7StepPulse {

  0%,
  10%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 18px rgba(20, 137, 207, .14);
  }

  5% {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 15px 30px rgba(18, 185, 231, .28);
  }
}

@keyframes iwf7ConnectorFlow {

  0%,
  4% {
    left: -35%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  13% {
    left: 100%;
    opacity: 0;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes iwf7DartHit {

  0%,
  4%,
  100% {
    transform: rotate(-13deg) translateX(0);
  }

  7% {
    transform: rotate(-13deg) translateX(-9px);
  }

  11% {
    transform: rotate(-13deg) translateX(2px);
  }

  15% {
    transform: rotate(-13deg) translateX(0);
  }
}

@keyframes iwf7OuterPulse {

  0%,
  72%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  82% {
    transform: translate(-50%, -50%) scale(1.018);
  }
}

@keyframes iwf7InnerPulse {

  0%,
  72%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  82% {
    transform: translate(-50%, -50%) scale(.975);
  }
}

@keyframes iwf7Bullseye {

  0%,
  6%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: inset -7px -3px 0 rgba(0, 0, 0, .12);
  }

  10% {
    transform: translate(-50%, -50%) scale(1.10);
    box-shadow:
      inset -7px -3px 0 rgba(0, 0, 0, .12),
      0 0 0 12px rgba(18, 185, 231, .11),
      0 0 32px rgba(18, 185, 231, .20);
  }

  16% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes iwf7ImpactRing {

  0%,
  5%,
  100% {
    opacity: 0;
    transform: scale(.9);
  }

  8% {
    opacity: .8;
  }

  17% {
    opacity: 0;
    transform: scale(1.55);
  }
}

@keyframes iwf7ArcBreath {

  0%,
  100% {
    opacity: .45;
  }

  50% {
    opacity: 1;
  }
}

/* Keep hover interaction on top of animation */
@media (hover:hover) and (min-width:768px) {
  #iwifi-workflow .iwf7-row:hover .iwf7-icon {
    transform: translateY(-5px) scale(1.09);
    box-shadow: 0 16px 30px rgba(18, 185, 231, .28);
  }

  #iwifi-workflow .iwf7-row:hover .iwf7-copy h3 {
    color: #12aeda;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

  #iwifi-workflow .iwf7-disc,
  #iwifi-workflow .iwf7-disc.d5::after,
  #iwifi-workflow .iwf7-arc,
  #iwifi-workflow .iwf7-dart,
  #iwifi-workflow .iwf7-row .iwf7-icon,
  #iwifi-workflow .iwf7-connector::after {
    animation: none !important;
  }
}


/* =========================================================
   V7.2 — THIN 3D TARGET, closer to reference
   flatter face + thin side depth + soft floor shadow
   ========================================================= */

/* Give the target a more upright elliptical perspective */
#iwifi-workflow .iwf7-target {
  left: 38px;
  top: 48px;
  width: 370px;
  height: 370px;
  transform: rotateY(-23deg) rotateZ(-2deg);
  filter: none;
}

/* Remove the heavy extrusion from the old outer disc */
#iwifi-workflow .iwf7-disc {
  box-shadow: none;
}

#iwifi-workflow .iwf7-disc.d1 {
  width: 370px;
  height: 370px;
  background: #0d70b5;
  box-shadow:
    -9px 9px 0 #074b80,
    -13px 13px 0 #063e6c,
    0 14px 28px rgba(8, 41, 77, .08);
}

#iwifi-workflow .iwf7-disc.d2 {
  width: 294px;
  height: 294px;
  background: #fff;
}

#iwifi-workflow .iwf7-disc.d3 {
  width: 220px;
  height: 220px;
  background: #18b9df;
}

#iwifi-workflow .iwf7-disc.d4 {
  width: 146px;
  height: 146px;
  background: #fff;
}

#iwifi-workflow .iwf7-disc.d5 {
  width: 72px;
  height: 72px;
  background: #0a315e;
  box-shadow:
    -3px 3px 0 #062443,
    0 6px 12px rgba(8, 41, 77, .10);
}

/* Much softer floor shadow, like the reference image */
#iwifi-workflow .iwf7-target-shadow {
  left: 118px;
  top: 435px;
  width: 190px;
  height: 22px;
  border-radius: 50%;
  background: rgba(8, 41, 77, .16);
  filter: blur(9px);
  transform: rotate(-2deg);
  opacity: .72;
}

/* Dart is slimmer so it does not overpower the target */
#iwifi-workflow .iwf7-dart {
  left: 181px;
  top: 180px;
  transform: rotate(-13deg) scale(.92);
}

#iwifi-workflow .iwf7-shaft {
  height: 5px;
  top: 13px;
  background: linear-gradient(180deg, #aebcc5, #667985);
  box-shadow: 0 3px 6px rgba(8, 41, 77, .12);
}

#iwifi-workflow .iwf7-tip {
  top: 8px;
  border-top-width: 7px;
  border-bottom-width: 7px;
  border-right-width: 21px;
}

/* Label follows the visually lighter target */
#iwifi-workflow .iwf7-goal-label {
  top: 470px;
}

/* Keep the existing animation, but make the pulse subtler */
@keyframes iwf7OuterPulse {

  0%,
  72%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  82% {
    transform: translate(-50%, -50%) scale(1.009);
  }
}

@keyframes iwf7InnerPulse {

  0%,
  72%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  82% {
    transform: translate(-50%, -50%) scale(.988);
  }
}

@media(max-width:767.98px) {
  #iwifi-workflow .iwf7-target {
    left: 50%;
    top: 6px;
    width: 270px;
    height: 270px;
    transform: translateX(-50%) rotateY(-18deg) rotateZ(-2deg);
  }

  #iwifi-workflow .iwf7-disc.d1 {
    width: 270px;
    height: 270px;
    box-shadow: -6px 6px 0 #074b80, -9px 9px 0 #063e6c, 0 10px 20px rgba(8, 41, 77, .07);
  }

  #iwifi-workflow .iwf7-disc.d2 {
    width: 214px;
    height: 214px
  }

  #iwifi-workflow .iwf7-disc.d3 {
    width: 160px;
    height: 160px
  }

  #iwifi-workflow .iwf7-disc.d4 {
    width: 106px;
    height: 106px
  }

  #iwifi-workflow .iwf7-disc.d5 {
    width: 53px;
    height: 53px
  }

  #iwifi-workflow .iwf7-target-shadow {
    left: 50%;
    top: 286px;
    width: 150px;
    height: 18px;
    transform: translateX(-50%) rotate(-2deg);
  }

  #iwifi-workflow .iwf7-dart {
    left: 129px;
    top: 127px;
    transform: rotate(-13deg) scale(.67);
  }

  #iwifi-workflow .iwf7-goal-label {
    top: 310px
  }
}


/* =========================================================
   IWIFI WORKFLOW V8 — REFERENCE-PRECISE COMPOSITION
   ========================================================= */
#iwifi-workflow.iwf8-section {
  --navy: #08294d;
  --cyan: #18b8df;
  --blue: #1776b8;
  --deep: #083f75;
  --muted: #788a9e;
  --line: #d3dde4;
  padding: 64px 0 72px;
  background: #fff;
  overflow: hidden;
  font-family: 'Poppins', sans-serif
}

#iwifi-workflow .iwf8-title {
  margin: 0 0 34px;
  color: var(--navy);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1px
}

#iwifi-workflow .iwf8-board {
  width: min(100%, 1120px);
  min-height: 560px;
  margin: auto;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center
}

/* LEFT TARGET — thin 3D plate, not a thick cylinder */
#iwifi-workflow .iwf8-visual {
  position: relative;
  height: 535px
}

#iwifi-workflow .iwf8-target {
  position: absolute;
  left: 28px;
  top: 42px;
  width: 385px;
  height: 385px;
  transform: rotateY(-13deg) rotateZ(-1deg);
  transform-style: preserve-3d
}

#iwifi-workflow .iwf8-side {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #063e70;
  transform: translate(-9px, 11px);
  z-index: 0
}

#iwifi-workflow .iwf8-face {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2
}

#iwifi-workflow .iwf8-face.outer {
  width: 385px;
  height: 385px;
  background: #1675b7;
  box-shadow: 0 16px 30px rgba(8, 41, 77, .08)
}

#iwifi-workflow .iwf8-face.white1 {
  width: 307px;
  height: 307px;
  background: #fff
}

#iwifi-workflow .iwf8-face.cyan {
  width: 229px;
  height: 229px;
  background: #20b7d8
}

#iwifi-workflow .iwf8-face.white2 {
  width: 151px;
  height: 151px;
  background: #fff
}

#iwifi-workflow .iwf8-face.bull {
  width: 75px;
  height: 75px;
  background: #0a315c;
  box-shadow: inset -3px -2px 0 rgba(0, 0, 0, .09)
}

#iwifi-workflow .iwf8-shadow {
  position: absolute;
  left: 120px;
  top: 449px;
  width: 195px;
  height: 23px;
  border-radius: 50%;
  background: rgba(8, 41, 77, .17);
  filter: blur(9px);
  opacity: .72
}

/* Dart points INTO the bullseye; tail extends to the right like reference */
#iwifi-workflow .iwf8-dart {
  position: absolute;
  left: 190px;
  top: 188px;
  width: 220px;
  height: 30px;
  transform: rotate(-14deg);
  transform-origin: left center;
  z-index: 8
}

#iwifi-workflow .iwf8-dart .shaft {
  position: absolute;
  left: 0;
  top: 12px;
  width: 176px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(#b3c0c8, #617480);
  box-shadow: 0 3px 5px rgba(8, 41, 77, .12)
}

#iwifi-workflow .iwf8-dart .point {
  position: absolute;
  left: -18px;
  top: 8px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 22px solid #536976
}

#iwifi-workflow .iwf8-dart .fin {
  position: absolute;
  right: 12px;
  width: 42px;
  height: 17px
}

#iwifi-workflow .iwf8-dart .fin-a {
  top: 0;
  background: #13b7df;
  clip-path: polygon(0 55%, 100% 0, 76% 100%, 0 78%)
}

#iwifi-workflow .iwf8-dart .fin-b {
  top: 15px;
  background: #1776b8;
  clip-path: polygon(0 18%, 76% 0, 100% 100%, 0 45%)
}

#iwifi-workflow .iwf8-outcome {
  position: absolute;
  left: 66px;
  top: 480px;
  width: 310px;
  text-align: center
}

#iwifi-workflow .iwf8-outcome span {
  display: block;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 1.8px
}

#iwifi-workflow .iwf8-outcome strong {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 700
}

/* RIGHT — arc sits behind the icon column exactly like the reference */
#iwifi-workflow .iwf8-flow {
  position: relative;
  height: 520px;
  padding-left: 40px
}

#iwifi-workflow .iwf8-arc {
  position: absolute;
  left: -42px;
  top: 7px;
  width: 162px;
  height: 502px;
  border: 2px dashed #dce5ea;
  border-left: 0;
  border-radius: 0 180px 180px 0;
  opacity: .9
}

#iwifi-workflow .iwf8-item {
  position: absolute;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 36px 58px 104px minmax(0, 1fr);
  align-items: center
}

#iwifi-workflow .iwf8-item.i1 {
  top: 16px
}

#iwifi-workflow .iwf8-item.i2 {
  top: 116px
}

#iwifi-workflow .iwf8-item.i3 {
  top: 216px
}

#iwifi-workflow .iwf8-item.i4 {
  top: 316px
}

#iwifi-workflow .iwf8-item.i5 {
  top: 416px
}

#iwifi-workflow .iwf8-no {
  color: #8ea0b1;
  font-size: 10px;
  font-weight: 700
}

#iwifi-workflow .iwf8-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #19a9dc;
  box-shadow: 0 8px 18px rgba(18, 137, 203, .13);
  z-index: 2
}

#iwifi-workflow .iwf8-item.i2 .iwf8-icon,
#iwifi-workflow .iwf8-item.i4 .iwf8-icon {
  background: #1778bb
}

#iwifi-workflow .iwf8-item.i5 .iwf8-icon {
  background: #0c5b9f
}

#iwifi-workflow .iwf8-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

#iwifi-workflow .iwf8-link {
  position: relative;
  height: 1px;
  background: #cbdce4;
  margin: 0 12px
}

#iwifi-workflow .iwf8-link i {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #c5d4dc
}

#iwifi-workflow .iwf8-link i:first-child {
  left: -2px
}

#iwifi-workflow .iwf8-link i:last-child {
  right: -2px
}

#iwifi-workflow .iwf8-copy {
  padding-left: 6px
}

#iwifi-workflow .iwf8-copy h3 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .6px
}

#iwifi-workflow .iwf8-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500
}

#iwifi-workflow .iwf8-item.i5 h3 {
  color: var(--cyan)
}

/* subtle motion */
#iwifi-workflow .iwf8-face.outer {
  animation: iwf8Breath 5.5s ease-in-out infinite
}

#iwifi-workflow .iwf8-face.cyan {
  animation: iwf8BreathInner 5.5s ease-in-out .25s infinite
}

#iwifi-workflow .iwf8-dart {
  animation: iwf8Dart 5.5s ease-in-out 4.2s infinite
}

@keyframes iwf8Breath {

  0%,
  75%,
  100% {
    transform: translate(-50%, -50%) scale(1)
  }

  84% {
    transform: translate(-50%, -50%) scale(1.008)
  }
}

@keyframes iwf8BreathInner {

  0%,
  75%,
  100% {
    transform: translate(-50%, -50%) scale(1)
  }

  84% {
    transform: translate(-50%, -50%) scale(.99)
  }
}

@keyframes iwf8Dart {

  0%,
  5%,
  100% {
    transform: rotate(-14deg) translateX(0)
  }

  9% {
    transform: rotate(-14deg) translateX(-6px)
  }

  13% {
    transform: rotate(-14deg) translateX(1px)
  }

  17% {
    transform: rotate(-14deg) translateX(0)
  }
}

@media(max-width:767.98px) {
  #iwifi-workflow.iwf8-section {
    padding: 48px 0 56px
  }

  #iwifi-workflow .container {
    padding-left: 20px;
    padding-right: 20px
  }

  #iwifi-workflow .iwf8-title {
    font-size: 28px;
    margin-bottom: 28px
  }

  #iwifi-workflow .iwf8-board {
    display: block;
    min-height: 0
  }

  #iwifi-workflow .iwf8-visual {
    height: 350px
  }

  #iwifi-workflow .iwf8-target {
    left: 50%;
    top: 5px;
    width: 270px;
    height: 270px;
    transform: translateX(-50%) rotateY(-10deg) rotateZ(-1deg)
  }

  #iwifi-workflow .iwf8-side {
    transform: translate(-6px, 7px)
  }

  #iwifi-workflow .iwf8-face.outer {
    width: 270px;
    height: 270px
  }

  #iwifi-workflow .iwf8-face.white1 {
    width: 215px;
    height: 215px
  }

  #iwifi-workflow .iwf8-face.cyan {
    width: 160px;
    height: 160px
  }

  #iwifi-workflow .iwf8-face.white2 {
    width: 106px;
    height: 106px
  }

  #iwifi-workflow .iwf8-face.bull {
    width: 53px;
    height: 53px
  }

  #iwifi-workflow .iwf8-shadow {
    left: 50%;
    top: 287px;
    width: 150px;
    height: 18px;
    transform: translateX(-50%)
  }

  #iwifi-workflow .iwf8-dart {
    left: 132px;
    top: 130px;
    transform: rotate(-14deg) scale(.68);
    transform-origin: left center
  }

  #iwifi-workflow .iwf8-outcome {
    left: 50%;
    top: 313px;
    width: 250px;
    transform: translateX(-50%)
  }

  #iwifi-workflow .iwf8-flow {
    height: auto;
    padding: 10px 0 0
  }

  #iwifi-workflow .iwf8-arc {
    display: none
  }

  #iwifi-workflow .iwf8-item,
  #iwifi-workflow .iwf8-item.i1,
  #iwifi-workflow .iwf8-item.i2,
  #iwifi-workflow .iwf8-item.i3,
  #iwifi-workflow .iwf8-item.i4,
  #iwifi-workflow .iwf8-item.i5 {
    position: relative;
    top: auto;
    left: auto;
    grid-template-columns: 28px 48px 38px 1fr;
    min-height: 76px
  }

  #iwifi-workflow .iwf8-icon {
    width: 42px;
    height: 42px
  }

  #iwifi-workflow .iwf8-link {
    margin: 0 6px
  }

  #iwifi-workflow .iwf8-copy h3 {
    font-size: 14px
  }

  #iwifi-workflow .iwf8-copy p {
    font-size: 10px
  }
}

@media(prefers-reduced-motion:reduce) {

  #iwifi-workflow .iwf8-face,
  #iwifi-workflow .iwf8-dart {
    animation: none !important
  }
}


/* =========================================================
   V8.1 — TARGET FLOOR SHADOW
   More separation + darker/stronger grounding shadow
   ========================================================= */
#iwifi-workflow .iwf8-shadow {
  left: 112px;
  top: 466px;
  /* push shadow farther below target */
  width: 215px;
  height: 25px;
  border-radius: 50%;
  background: rgba(8, 41, 77, .30);
  filter: blur(8px);
  opacity: .88;
  transform: scaleX(1.05);
}

/* softer secondary halo around the dark core */
#iwifi-workflow .iwf8-shadow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(8, 41, 77, .10);
  filter: blur(12px);
  z-index: -1;
}

@media(max-width:767.98px) {
  #iwifi-workflow .iwf8-shadow {
    left: 50%;
    top: 298px;
    width: 160px;
    height: 18px;
    transform: translateX(-50%) scaleX(1.05);
    background: rgba(8, 41, 77, .28);
    filter: blur(7px);
    opacity: .86;
  }

  #iwifi-workflow .iwf8-shadow::after {
    width: 190px;
    height: 26px;
  }
}

/* IWIFI WORKFLOW V9 — GROWTH FLYWHEEL */
#iwifi-workflow.iwf9-section {
  --n: #08294d;
  --c: #16b9e7;
  --b: #167ec4;
  --d: #0a559b;
  --m: #7b8da1;
  padding: 66px 0 78px;
  background: radial-gradient(circle at 50% 53%, rgba(22, 185, 231, .075), transparent 28%), #fff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden
}

#iwifi-workflow .iwf9-head {
  text-align: center;
  margin-bottom: 12px
}

#iwifi-workflow .iwf9-head h2 {
  margin: 0;
  color: var(--n);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1.1px
}

#iwifi-workflow .iwf9-flywheel {
  position: relative;
  width: 850px;
  height: 650px;
  margin: auto
}

#iwifi-workflow .iwf9-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 24px solid rgba(22, 185, 231, .12);
  box-shadow: 0 25px 60px rgba(8, 41, 77, .05)
}

#iwifi-workflow .iwf9-ring:after {
  content: "";
  position: absolute;
  inset: -25px;
  border-radius: 50%;
  border: 11px solid transparent;
  border-top-color: #1ac0e5;
  border-right-color: #168fd0;
  border-bottom-color: #0c64aa;
  border-left-color: #1476b9
}

#iwifi-workflow .iwf9-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(22, 185, 231, .28);
  border-radius: 50%
}

#iwifi-workflow .iwf9-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 225px;
  height: 225px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(145deg, #0b315b, #082548);
  color: #fff;
  box-shadow: 0 22px 48px rgba(8, 41, 77, .2), 0 0 0 12px #fff;
  z-index: 3;
  animation: iwf9Center 4.8s ease-in-out infinite
}

#iwifi-workflow .iwf9-center span {
  color: #54d4f2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 7px
}

#iwifi-workflow .iwf9-center strong {
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -.7px
}

#iwifi-workflow .iwf9-center small {
  margin-top: 11px;
  color: rgba(255, 255, 255, .58);
  font-size: 9px
}

#iwifi-workflow .iwf9-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 5;
  min-width: 205px
}

#iwifi-workflow .iwf9-icon {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 25px;
  font-family: Arial, sans-serif;
  background: linear-gradient(145deg, #1dc4e8, #1689ce);
  border: 7px solid #fff;
  box-shadow: 0 13px 28px rgba(14, 111, 180, .18)
}

#iwifi-workflow .n2 .iwf9-icon,
#iwifi-workflow .n4 .iwf9-icon {
  background: linear-gradient(145deg, #1688ca, #1063aa)
}

#iwifi-workflow .n5 .iwf9-icon {
  background: linear-gradient(145deg, #0f6bae, #073d79);
  transform: scale(1.08)
}

#iwifi-workflow .iwf9-node b {
  display: block;
  color: #9aabba;
  font-size: 9px;
  line-height: 1;
  margin-bottom: 4px
}

#iwifi-workflow .iwf9-node h3 {
  margin: 0 0 3px;
  color: var(--n);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .7px
}

#iwifi-workflow .iwf9-node p {
  margin: 0;
  color: var(--m);
  font-size: 10px;
  white-space: nowrap
}

#iwifi-workflow .n5 h3 {
  color: var(--c)
}

#iwifi-workflow .n1 {
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
  flex-direction: column;
  text-align: center;
  gap: 5px
}

#iwifi-workflow .n2 {
  right: 12px;
  top: 200px
}

#iwifi-workflow .n3 {
  right: 72px;
  bottom: 48px
}

#iwifi-workflow .n4 {
  left: 68px;
  bottom: 48px;
  flex-direction: row-reverse;
  text-align: right
}

#iwifi-workflow .n5 {
  left: 10px;
  top: 200px;
  flex-direction: row-reverse;
  text-align: right
}

#iwifi-workflow .iwf9-runner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 4;
  animation: iwf9Spin 10s linear infinite;
  pointer-events: none
}

#iwifi-workflow .iwf9-runner:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--c);
  box-shadow: 0 0 0 6px rgba(22, 185, 231, .1), 0 0 22px rgba(22, 185, 231, .45)
}

@keyframes iwf9Spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg)
  }
}

@keyframes iwf9Center {
  50% {
    box-shadow: 0 26px 56px rgba(8, 41, 77, .24), 0 0 0 12px #fff, 0 0 0 20px rgba(22, 185, 231, .05)
  }
}

@media(max-width:767.98px) {
  #iwifi-workflow.iwf9-section {
    padding: 48px 0 58px
  }

  #iwifi-workflow .container {
    padding-left: 20px;
    padding-right: 20px
  }

  #iwifi-workflow .iwf9-head {
    text-align: left;
    margin-bottom: 30px
  }

  #iwifi-workflow .iwf9-head h2 {
    font-size: 28px
  }

  #iwifi-workflow .iwf9-flywheel {
    width: 100%;
    height: auto;
    padding-top: 300px
  }

  #iwifi-workflow .iwf9-ring {
    top: 135px;
    width: 235px;
    height: 235px;
    border-width: 16px
  }

  #iwifi-workflow .iwf9-orbit {
    top: 135px;
    width: 280px;
    height: 280px
  }

  #iwifi-workflow .iwf9-center {
    top: 135px;
    width: 132px;
    height: 132px
  }

  #iwifi-workflow .iwf9-center strong {
    font-size: 18px
  }

  #iwifi-workflow .iwf9-center span {
    font-size: 8px
  }

  #iwifi-workflow .iwf9-center small {
    font-size: 7px;
    margin-top: 6px
  }

  #iwifi-workflow .iwf9-runner {
    top: 135px;
    width: 280px;
    height: 280px
  }

  #iwifi-workflow .iwf9-node,
  #iwifi-workflow .n1,
  #iwifi-workflow .n2,
  #iwifi-workflow .n3,
  #iwifi-workflow .n4,
  #iwifi-workflow .n5 {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    flex-direction: row;
    text-align: left;
    min-width: 0;
    margin: 0 0 13px;
    padding: 10px 12px;
    border: 1px solid #e6f0f4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(8, 41, 77, .045)
  }

  #iwifi-workflow .iwf9-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-width: 5px;
    font-size: 20px
  }

  #iwifi-workflow .iwf9-node h3 {
    font-size: 14px
  }
}

@media(prefers-reduced-motion:reduce) {

  #iwifi-workflow .iwf9-runner,
  #iwifi-workflow .iwf9-center {
    animation: none !important
  }
}


/* =========================================================
   IWIFI PRO V10 — GROWTH PIPELINE / CONVERSION ENGINE
   Distinct from MiaWiFi circular ecosystem language
   ========================================================= */
#iwifi-workflow.iwf10-section {
  --navy: #07294e;
  --navy2: #0b3d69;
  --cyan: #16b9e7;
  --blue: #147fbe;
  --muted: #788b9e;
  --surface: #f7fbfd;
  --line: #dcebf1;
  padding: 66px 0 76px;
  background: #f7fbfd;
  font-family: 'Poppins', sans-serif;
  overflow: hidden
}

#iwifi-workflow .iwf10-head {
  margin-bottom: 34px
}

#iwifi-workflow .iwf10-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1.1px
}

#iwifi-workflow .iwf10-engine {
  position: relative;
  max-width: 1160px;
  height: 520px;
  margin: 0 auto;
  border: 1px solid rgba(7, 41, 78, .055);
  border-radius: 30px;
  background:
    radial-gradient(circle at 85% 50%, rgba(22, 185, 231, .09), transparent 25%),
    linear-gradient(135deg, #fff 0%, #fbfdfe 52%, #f3fafc 100%);
  box-shadow: 0 24px 65px rgba(7, 41, 78, .055);
  overflow: hidden
}

#iwifi-workflow .iwf10-grid {
  position: absolute;
  inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(rgba(7, 41, 78, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 41, 78, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 78%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 78%)
}

#iwifi-workflow .iwf10-pipeline {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 58px;
  height: 350px
}

/* Energy rail */
#iwifi-workflow .iwf10-rail {
  position: absolute;
  left: 74px;
  right: 220px;
  top: 181px;
  height: 4px;
  border-radius: 20px
}

#iwifi-workflow .rail-base {
  background: #d9e8ee
}

#iwifi-workflow .rail-energy {
  background: linear-gradient(90deg, #a9dce9 0%, #5bc8e3 28%, #17b9e6 62%, #0e73b4 100%);
  transform-origin: left center;
  animation: iwf10Rail 5.8s ease-in-out infinite
}

#iwifi-workflow .rail-energy:after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #0e73b4
}

#iwifi-workflow .iwf10-pulse {
  position: absolute;
  top: 175px;
  left: 75px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--cyan);
  box-shadow: 0 0 0 7px rgba(22, 185, 231, .09), 0 0 22px rgba(22, 185, 231, .30);
  animation: iwf10Pulse 5.8s linear infinite
}

#iwifi-workflow .p2 {
  animation-delay: 2.9s;
  opacity: .55
}

/* Modules */
#iwifi-workflow .iwf10-stage {
  position: absolute;
  top: 87px;
  width: 145px;
  text-align: center;
  z-index: 3
}

#iwifi-workflow .s1 {
  left: 5px
}

#iwifi-workflow .s2 {
  left: 195px
}

#iwifi-workflow .s3 {
  left: 385px
}

#iwifi-workflow .s4 {
  left: 575px
}

#iwifi-workflow .iwf10-number {
  display: inline-block;
  margin-bottom: 10px;
  color: #8da2b3;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px
}

#iwifi-workflow .iwf10-module {
  position: relative;
  height: 190px;
  padding: 22px 12px 15px;
  border: 1px solid #e0edf2;
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 30px rgba(7, 41, 78, .055);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease
}

#iwifi-workflow .iwf10-module:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 1px;
  height: 16px;
  background: #bcdbe6
}

#iwifi-workflow .iwf10-module:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -21px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #80cce0;
  z-index: 2
}

#iwifi-workflow .iwf10-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--cyan);
  background: #eefaff;
  border: 1px solid #d6f1f8
}

#iwifi-workflow .iwf10-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

#iwifi-workflow .iwf10-stage h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: .7px
}

#iwifi-workflow .iwf10-stage p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.6;
  font-weight: 500
}

#iwifi-workflow .iwf10-stage:hover .iwf10-module {
  transform: translateY(-6px);
  border-color: #cceaf3;
  box-shadow: 0 18px 38px rgba(7, 41, 78, .09)
}

/* Growth output: intentionally not another card/node */
#iwifi-workflow .iwf10-output {
  position: absolute;
  right: 0;
  top: 49px;
  width: 235px;
  height: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  border-radius: 28px;
  background: linear-gradient(145deg, #0b3d69 0%, #07294e 55%, #061f3d 100%);
  box-shadow: 0 22px 50px rgba(7, 41, 78, .20);
  overflow: hidden;
  z-index: 4
}

#iwifi-workflow .iwf10-output:before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  right: -85px;
  top: -75px;
  border: 1px solid rgba(67, 210, 242, .18);
  box-shadow: 0 0 0 28px rgba(22, 185, 231, .035), 0 0 0 58px rgba(22, 185, 231, .025)
}

#iwifi-workflow .iwf10-output-label {
  position: absolute;
  top: 18px;
  left: 20px;
  color: #58d6f2;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 1.6px
}

#iwifi-workflow .iwf10-output-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 15px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, #18bee7, #1181bf);
  box-shadow: 0 12px 28px rgba(22, 185, 231, .19)
}

#iwifi-workflow .iwf10-output-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

#iwifi-workflow .iwf10-output-copy span {
  display: block;
  color: #56d3f0;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 1.4px;
  margin-bottom: 8px
}

#iwifi-workflow .iwf10-output-copy strong {
  display: block;
  font-size: 24px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.6px
}

#iwifi-workflow .iwf10-output-copy small {
  display: block;
  margin-top: 11px;
  color: rgba(255, 255, 255, .58);
  font-size: 8px
}

/* Bottom data legend */
#iwifi-workflow .iwf10-caption {
  position: absolute;
  left: 50%;
  bottom: 31px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8194a5;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap
}

#iwifi-workflow .iwf10-caption i {
  width: 34px;
  height: 1px;
  background: #c9dce4;
  position: relative
}

#iwifi-workflow .iwf10-caption i:after {
  content: "";
  position: absolute;
  right: -1px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a9cbd8
}

#iwifi-workflow .iwf10-caption strong {
  color: var(--cyan);
  font-weight: 750
}

/* Animation */
@keyframes iwf10Rail {

  0%,
  100% {
    filter: saturate(.9);
    opacity: .75
  }

  50% {
    filter: saturate(1.2);
    opacity: 1
  }
}

@keyframes iwf10Pulse {
  0% {
    left: 75px;
    opacity: 0
  }

  5% {
    opacity: 1
  }

  82% {
    left: 790px;
    opacity: 1
  }

  88%,
  100% {
    left: 790px;
    opacity: 0
  }
}

@media(max-width:991.98px) and (min-width:768px) {
  #iwifi-workflow .iwf10-engine {
    transform: scale(.88);
    transform-origin: top left;
    width: 113.6%;
    margin-bottom: -62px
  }
}

@media(max-width:767.98px) {
  #iwifi-workflow.iwf10-section {
    padding: 48px 0 58px
  }

  #iwifi-workflow .container {
    padding-left: 20px;
    padding-right: 20px
  }

  #iwifi-workflow .iwf10-head {
    margin-bottom: 26px
  }

  #iwifi-workflow .iwf10-head h2 {
    font-size: 28px;
    letter-spacing: -.8px
  }

  #iwifi-workflow .iwf10-engine {
    height: auto;
    padding: 22px 16px 18px;
    border-radius: 22px
  }

  #iwifi-workflow .iwf10-grid {
    display: none
  }

  #iwifi-workflow .iwf10-pipeline {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: auto
  }

  #iwifi-workflow .iwf10-rail {
    left: 24px;
    right: auto;
    top: 40px;
    bottom: 210px;
    width: 3px;
    height: auto
  }

  #iwifi-workflow .rail-energy {
    background: linear-gradient(180deg, #8bd7e8, #16b9e7, #0d72b4)
  }

  #iwifi-workflow .rail-energy:after {
    display: none
  }

  #iwifi-workflow .iwf10-pulse {
    display: none
  }

  #iwifi-workflow .iwf10-stage,
  #iwifi-workflow .s1,
  #iwifi-workflow .s2,
  #iwifi-workflow .s3,
  #iwifi-workflow .s4 {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    text-align: left;
    padding-left: 48px;
    margin-bottom: 12px
  }

  #iwifi-workflow .iwf10-number {
    position: absolute;
    left: 0;
    top: 22px;
    width: 28px;
    text-align: center;
    margin: 0
  }

  #iwifi-workflow .iwf10-module {
    height: auto;
    min-height: 86px;
    padding: 15px 14px 14px 74px;
    border-radius: 16px
  }

  #iwifi-workflow .iwf10-module:before,
  #iwifi-workflow .iwf10-module:after {
    display: none
  }

  #iwifi-workflow .iwf10-icon {
    position: absolute;
    left: 14px;
    top: 17px;
    width: 45px;
    height: 45px;
    margin: 0;
    border-radius: 13px
  }

  #iwifi-workflow .iwf10-stage h3 {
    font-size: 13px;
    margin-bottom: 5px
  }

  #iwifi-workflow .iwf10-stage p {
    font-size: 9px;
    line-height: 1.45
  }

  #iwifi-workflow .iwf10-output {
    position: relative;
    right: auto;
    top: auto;
    width: auto;
    height: 185px;
    margin: 20px 0 0 48px;
    border-radius: 20px
  }

  #iwifi-workflow .iwf10-output-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 10px
  }

  #iwifi-workflow .iwf10-output-copy strong {
    font-size: 21px
  }

  #iwifi-workflow .iwf10-caption {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    justify-content: center;
    margin-top: 19px;
    gap: 7px;
    font-size: 7px
  }

  #iwifi-workflow .iwf10-caption i {
    width: 15px
  }
}

@media(prefers-reduced-motion:reduce) {

  #iwifi-workflow .rail-energy,
  #iwifi-workflow .iwf10-pulse {
    animation: none !important
  }
}

/* V11 — source-content alignment + editorial heading */
#iwifi-workflow .iwf10-head {
  max-width: 760px;
  margin-bottom: 34px
}

#iwifi-workflow .iwf10-eyebrow {
  margin-bottom: 9px;
  color: #147fbe;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px
}

#iwifi-workflow .iwf10-head h2 {
  font-size: 42px;
  letter-spacing: -1.45px;
  text-transform: none
}

#iwifi-workflow .iwf10-head h2 span {
  color: #16b9e7
}

#iwifi-workflow .iwf10-head>p {
  max-width: 650px;
  margin: 12px 0 0;
  color: #788b9e;
  font-size: 14px;
  line-height: 1.65
}

#iwifi-workflow .iwf10-module {
  height: 205px;
  padding: 18px 10px 14px
}

#iwifi-workflow .iwf10-icon {
  width: 43px;
  height: 43px;
  margin-bottom: 11px
}

#iwifi-workflow .iwf10-stage h3 {
  margin-bottom: 6px
}

#iwifi-workflow .iwf10-stage h4 {
  margin: 0 0 7px;
  color: #274b6b;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 650
}

#iwifi-workflow .iwf10-stage p {
  font-size: 8.4px;
  line-height: 1.55
}

#iwifi-workflow .iwf10-output-copy small {
  max-width: 170px;
  line-height: 1.5
}

@media(max-width:767.98px) {
  #iwifi-workflow .iwf10-head h2 {
    font-size: 30px;
    letter-spacing: -.9px
  }

  #iwifi-workflow .iwf10-head>p {
    font-size: 12px
  }

  #iwifi-workflow .iwf10-module {
    height: auto;
    min-height: 112px;
    padding: 14px 12px 13px 72px
  }

  #iwifi-workflow .iwf10-stage h4 {
    font-size: 10px;
    margin-bottom: 5px
  }

  #iwifi-workflow .iwf10-stage p {
    font-size: 8.5px
  }
}


/* ================================================================
   V13 — PREMIUM INTERACTIVE TIMELINE
   ================================================================ */
#iwifi-workflow.iwftl-section {
  padding: 88px 0 100px;
  background: linear-gradient(180deg, #fff 0%, #f8fcfe 100%);
  overflow: hidden;
  font-family: Inter, Segoe UI, system-ui, sans-serif
}

#iwifi-workflow .iwftl-head {
  max-width: 760px;
  margin: 0 0 58px
}

#iwifi-workflow .iwftl-eyebrow {
  margin-bottom: 9px;
  color: #147fbe;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px
}

#iwifi-workflow .iwftl-head h2 {
  margin: 0;
  color: #0b3155;
  font-size: 42px;
  line-height: 1.12;
  font-weight: 720;
  letter-spacing: -1.45px;
  text-transform: none
}

#iwifi-workflow .iwftl-head h2 span {
  color: #16b9e7
}

#iwifi-workflow .iwftl-head p {
  max-width: 650px;
  margin: 12px 0 0;
  color: #788b9e;
  font-size: 14px;
  line-height: 1.65
}

#iwifi-workflow .iwftl-wrap {
  position: relative;
  height: 480px;
  border-radius: 34px;
  background: radial-gradient(circle at 85% 50%, rgba(22, 185, 231, .09), transparent 25%), linear-gradient(135deg, #f9fdff, #fff);
  border: 1px solid #e4f0f5;
  box-shadow: 0 24px 70px rgba(7, 41, 78, .07);
  overflow: hidden
}

#iwifi-workflow .iwftl-wrap:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(13, 83, 126, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 83, 126, .035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, .7), transparent 82%)
}

#iwifi-workflow .iwftl-line {
  position: absolute;
  left: 7%;
  right: 8%;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 5px;
  background: #dcebf1;
  z-index: 1
}

#iwifi-workflow .iwftl-line span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #4bc7e7 0%, #18b9e5 48%, #0e80bf 76%, #23c98a 100%);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 18px rgba(22, 185, 231, .45)
}

#iwifi-workflow.is-visible .iwftl-line span {
  animation: iwftlDraw 1.65s cubic-bezier(.2, .75, .25, 1) .15s forwards
}

#iwifi-workflow .iwftl-flow {
  position: absolute;
  inset: 0 5.5%
}

#iwifi-workflow .iwftl-step {
  position: absolute;
  top: 50%;
  width: 18%;
  z-index: 3;
  opacity: 0;
  transform: translateY(-50%)
}

#iwifi-workflow .iwftl-step.s1 {
  left: 0
}

.iwftl-step.s2 {
  left: 20%
}

.iwftl-step.s3 {
  left: 40%
}

.iwftl-step.s4 {
  left: 60%
}

#iwifi-workflow .iwftl-step.s5 {
  right: 0;
  width: 20%
}

#iwifi-workflow.is-visible .iwftl-step {
  animation: iwftlReveal .6s ease forwards
}

#iwifi-workflow.is-visible .s1 {
  animation-delay: .25s
}

#iwifi-workflow.is-visible .s2 {
  animation-delay: .5s
}

#iwifi-workflow.is-visible .s3 {
  animation-delay: .75s
}

#iwifi-workflow.is-visible .s4 {
  animation-delay: 1s
}

#iwifi-workflow.is-visible .s5 {
  animation-delay: 1.25s
}

#iwifi-workflow .iwftl-node {
  position: absolute;
  left: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #119dcc;
  background: #fff;
  border: 1px solid #cdeaf3;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .92), 0 10px 30px rgba(8, 68, 105, .13);
  transition: .32s ease;
  z-index: 4
}

#iwifi-workflow .iwftl-node svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

#iwifi-workflow .iwftl-copy {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center
}

#iwifi-workflow .top .iwftl-copy {
  bottom: 52px
}

.iwftl-step.bottom .iwftl-copy {
  top: 52px
}

#iwifi-workflow .iwftl-copy:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 32px;
  background: linear-gradient(#b9dce8, rgba(185, 220, 232, 0));
  transform: translateX(-50%)
}

#iwifi-workflow .top .iwftl-copy:after {
  bottom: -38px
}

.iwftl-step.bottom .iwftl-copy:after {
  top: -38px;
  transform: translateX(-50%) rotate(180deg)
}

#iwifi-workflow .iwftl-copy b {
  display: block;
  margin-bottom: 8px;
  color: #16a9d5;
  font-size: 14px;
  letter-spacing: 1.5px
}

#iwifi-workflow .iwftl-copy h3 {
  margin: 0 0 7px;
  color: #0b3155;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 780;
  letter-spacing: .4px
}

#iwifi-workflow .iwftl-copy h4 {
  margin: 0 0 7px;
  color: #315c78;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35
}

#iwifi-workflow .iwftl-copy p {
  margin: 0;
  color: #7a8fa0;
  font-size: 9px;
  line-height: 1.65;
  font-weight: 500
}

#iwifi-workflow .iwftl-step:not(.grow):hover .iwftl-node {
  transform: translate(-50%, -50%) scale(1.13);
  color: #fff;
  background: linear-gradient(145deg, #20c5e8, #1187c5);
  border-color: transparent;
  box-shadow: 0 0 0 9px rgba(22, 185, 231, .09), 0 16px 34px rgba(17, 135, 197, .25)
}

#iwifi-workflow .iwftl-step:not(.grow):hover .iwftl-copy h3 {
  color: #119dcc
}

#iwifi-workflow .grow .iwftl-node {
  width: 82px;
  height: 82px;
  color: #fff;
  border: 0;
  background: linear-gradient(145deg, #1dc6df, #0d7cbd 58%, #1fba83);
  box-shadow: 0 0 0 12px rgba(22, 185, 231, .08), 0 18px 42px rgba(10, 106, 157, .28)
}

#iwifi-workflow .grow .iwftl-node svg {
  width: 32px;
  height: 32px
}

#iwifi-workflow .iwftl-growhalo {
  position: absolute;
  left: 50%;
  top: 0;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(22, 185, 231, .23);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 22px rgba(22, 185, 231, .035), 0 0 0 44px rgba(22, 185, 231, .02)
}

#iwifi-workflow.is-visible .iwftl-growhalo {
  animation: iwftlHalo 2.8s ease-in-out 1.8s infinite
}

#iwifi-workflow .grow .iwftl-copy {
  top: 66px
}

#iwifi-workflow .grow .iwftl-copy:after {
  display: none
}

#iwifi-workflow .grow .iwftl-copy b {
  color: #159bc9
}

.iwftl-step.grow .iwftl-copy h3 {
  font-size: 19px;
  letter-spacing: -.2px
}

.iwftl-step.grow .iwftl-copy p {
  font-size: 9.5px
}

@keyframes iwftlDraw {
  to {
    transform: scaleX(1)
  }
}

@keyframes iwftlReveal {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(.88)
  }

  to {
    opacity: 1;
    transform: translateY(-50%) scale(1)
  }
}

@keyframes iwftlHalo {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(.94);
    opacity: .55
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1
  }
}

@media(max-width:991.98px) and (min-width:768px) {
  #iwifi-workflow .iwftl-wrap {
    height: 430px
  }

  #iwifi-workflow .iwftl-flow {
    inset: 0 3%
  }

  #iwifi-workflow .iwftl-copy h3 {
    font-size: 14px
  }

  #iwifi-workflow .iwftl-copy h4 {
    font-size: 9px
  }

  #iwifi-workflow .iwftl-copy p {
    font-size: 7.5px
  }
}

@media(max-width:767.98px) {
  #iwifi-workflow.iwftl-section {
    padding: 52px 0 64px
  }

  #iwifi-workflow .container {
    padding-left: 20px;
    padding-right: 20px
  }

  #iwifi-workflow .iwftl-head {
    margin-bottom: 30px
  }

  #iwifi-workflow .iwftl-head h2 {
    font-size: 30px;
    letter-spacing: -.9px
  }

  #iwifi-workflow .iwftl-head p {
    font-size: 12px
  }

  #iwifi-workflow .iwftl-wrap {
    height: auto;
    min-height: 710px;
    padding: 34px 18px;
    border-radius: 24px
  }

  #iwifi-workflow .iwftl-wrap:before {
    display: none
  }

  #iwifi-workflow .iwftl-line {
    left: 40px;
    right: auto;
    top: 44px;
    bottom: 48px;
    width: 3px;
    height: auto;
    transform: none
  }

  #iwifi-workflow .iwftl-line span {
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    background: linear-gradient(180deg, #4bc7e7, #0e80bf 70%, #23c98a)
  }

  #iwifi-workflow.is-visible .iwftl-line span {
    animation: iwftlDrawY 1.65s ease forwards
  }

  #iwifi-workflow .iwftl-flow {
    position: relative;
    inset: auto;
    padding-left: 76px
  }

  #iwifi-workflow .iwftl-step,
  #iwifi-workflow .iwftl-step.s1,
  #iwifi-workflow .iwftl-step.s2,
  #iwifi-workflow .iwftl-step.s3,
  #iwifi-workflow .iwftl-step.s4,
  #iwifi-workflow .iwftl-step.s5 {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    height: 118px;
    transform: none
  }

  .iwftl-step.grow {
    height: 150px !important
  }

  #iwifi-workflow.is-visible .iwftl-step {
    animation: iwftlRevealMobile .55s ease forwards
  }

  #iwifi-workflow .iwftl-node,
  #iwifi-workflow .grow .iwftl-node {
    left: -54px;
    top: 30px;
    width: 52px;
    height: 52px;
    transform: translate(-50%, -50%)
  }

  #iwifi-workflow .grow .iwftl-node {
    width: 64px;
    height: 64px
  }

  #iwifi-workflow .iwftl-copy,
  #iwifi-workflow .top .iwftl-copy,
  #iwifi-workflow .bottom .iwftl-copy,
  #iwifi-workflow .grow .iwftl-copy {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    text-align: left
  }

  #iwifi-workflow .iwftl-copy:after {
    display: none
  }

  #iwifi-workflow .iwftl-copy b {
    margin-bottom: 5px
  }

  #iwifi-workflow .iwftl-copy h3 {
    font-size: 15px;
    margin-bottom: 5px
  }

  #iwifi-workflow .iwftl-copy h4 {
    font-size: 10px;
    margin-bottom: 5px
  }

  #iwifi-workflow .iwftl-copy p {
    font-size: 8.5px
  }

  #iwifi-workflow .iwftl-growhalo {
    left: -54px;
    top: 30px;
    width: 84px;
    height: 84px
  }

  #iwifi-workflow .iwftl-step:not(.grow):hover .iwftl-node {
    transform: translate(-50%, -50%) scale(1.06)
  }
}

@keyframes iwftlDrawY {
  to {
    transform: scaleY(1)
  }
}

@keyframes iwftlRevealMobile {
  from {
    opacity: 0;
    transform: translateX(18px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@media(prefers-reduced-motion:reduce) {

  #iwifi-workflow .iwftl-line span,
  #iwifi-workflow .iwftl-step,
  #iwifi-workflow .iwftl-growhalo {
    animation: none !important;
    opacity: 1;
    transform: none
  }

  #iwifi-workflow .iwftl-line span {
    transform: scaleX(1)
  }
}


/* ================================================================
   V14 — PREMIUM HEADING + ALTERNATING GROW DESTINATION
   ================================================================ */
#iwifi-workflow .iwftl-head {
  max-width: 920px;
  margin: 0 0 62px
}

#iwifi-workflow .iwftl-title {
  margin: 0;
  color: #0b3155;
  font-size: 54px;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -2.1px;
  text-transform: uppercase
}

#iwifi-workflow .iwftl-tagline {
  margin-top: 14px;
  color: #234b6d;
  font-size: 27px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.65px
}

#iwifi-workflow .iwftl-tagline span {
  color: #16b9e7
}

#iwifi-workflow .iwftl-head p {
  max-width: 700px;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: #788b9e
}

/* Step 05 completes the alternating rhythm: 01 up, 02 down, 03 up, 04 down, 05 up. */
#iwifi-workflow .grow.top .iwftl-copy {
  top: auto;
  bottom: 72px
}

#iwifi-workflow .grow.top .iwftl-copy:after {
  display: block;
  bottom: -44px;
  height: 36px;
  background: linear-gradient(#8ed8e9, rgba(142, 216, 233, 0))
}

#iwifi-workflow .grow .iwftl-copy b {
  margin-bottom: 9px
}

#iwifi-workflow .iwftl-growhalo {
  top: 0
}

#iwifi-workflow .grow.top .iwftl-copy h3 {
  font-size: 20px
}

#iwifi-workflow .grow.top .iwftl-copy p {
  font-size: 9.5px
}

@media(max-width:991.98px) and (min-width:768px) {
  #iwifi-workflow .iwftl-title {
    font-size: 44px;
    letter-spacing: -1.6px
  }

  #iwifi-workflow .iwftl-tagline {
    font-size: 23px
  }
}

@media(max-width:767.98px) {
  #iwifi-workflow .iwftl-head {
    margin-bottom: 34px
  }

  #iwifi-workflow .iwftl-title {
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -1.3px
  }

  #iwifi-workflow .iwftl-tagline {
    margin-top: 10px;
    font-size: 20px;
    line-height: 1.28;
    letter-spacing: -.35px
  }

  #iwifi-workflow .iwftl-head p {
    margin-top: 9px;
    font-size: 12px
  }

  #iwifi-workflow .grow.top .iwftl-copy {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    text-align: left
  }

  #iwifi-workflow .grow.top .iwftl-copy:after {
    display: none
  }
}


/* V15 — FIX: GROW content definitively above timeline on desktop */
@media (min-width: 768px) {
  #iwifi-workflow .iwftl-step.grow.top .iwftl-copy {
    top: auto !important;
    bottom: 78px !important;
    text-align: center;
  }

  #iwifi-workflow .iwftl-step.grow.top .iwftl-copy:after {
    display: block !important;
    top: auto !important;
    bottom: -43px !important;
    height: 34px;
  }

  #iwifi-workflow .iwftl-step.grow.top .iwftl-node {
    top: 0;
  }

  #iwifi-workflow .iwftl-step.grow.top .iwftl-growhalo {
    top: 0;
  }
}

/* ================================================================
   V20 — MOBILE HORIZONTAL TIMELINE
   Keep all 5 steps visible in one composition (no vertical stacking)
   ================================================================ */
@media (max-width: 767.98px) {
  #iwifi-workflow.iwftl-section {
    padding: 46px 0 56px;
  }

  #iwifi-workflow .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  #iwifi-workflow .iwftl-head {
    margin-bottom: 24px;
  }

  #iwifi-workflow .iwftl-title {
    font-size: clamp(30px, 9vw, 38px);
    line-height: .98;
    letter-spacing: -1.4px;
  }

  #iwifi-workflow .iwftl-tagline {
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.22;
  }

  #iwifi-workflow .iwftl-head p {
    margin-top: 8px;
    max-width: 340px;
    font-size: 11px;
    line-height: 1.5;
  }

  #iwifi-workflow .iwftl-wrap {
    height: 350px;
    min-height: 0;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
  }

  #iwifi-workflow .iwftl-wrap:before {
    display: block;
    background-size: 26px 26px;
    opacity: .65;
  }

  #iwifi-workflow .iwftl-line {
    left: 5%;
    right: 5%;
    top: 51%;
    bottom: auto;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
  }

  #iwifi-workflow .iwftl-line span {
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, #4bc7e7 0%, #18b9e5 48%, #0e80bf 76%, #23c98a 100%);
  }

  #iwifi-workflow.is-visible .iwftl-line span {
    animation: iwftlDraw 1.45s cubic-bezier(.2, .75, .25, 1) .1s forwards;
  }

  #iwifi-workflow .iwftl-flow {
    position: absolute;
    inset: 0 3%;
    padding-left: 0;
  }

  #iwifi-workflow .iwftl-step,
  #iwifi-workflow .iwftl-step.s1,
  #iwifi-workflow .iwftl-step.s2,
  #iwifi-workflow .iwftl-step.s3,
  #iwifi-workflow .iwftl-step.s4,
  #iwifi-workflow .iwftl-step.s5 {
    position: absolute;
    top: 51%;
    right: auto;
    width: 19%;
    height: auto;
    opacity: 0;
    transform: translateY(-50%);
  }

  #iwifi-workflow .iwftl-step.s1 {
    left: 0;
  }

  #iwifi-workflow .iwftl-step.s2 {
    left: 20%;
  }

  #iwifi-workflow .iwftl-step.s3 {
    left: 40%;
  }

  #iwifi-workflow .iwftl-step.s4 {
    left: 60%;
  }

  #iwifi-workflow .iwftl-step.s5 {
    left: 80%;
    width: 20%;
  }

  #iwifi-workflow .iwftl-step.grow {
    height: auto !important;
  }

  #iwifi-workflow.is-visible .iwftl-step {
    animation: iwftlReveal .5s ease forwards;
  }

  #iwifi-workflow .iwftl-node,
  #iwifi-workflow .grow .iwftl-node {
    left: 50%;
    top: 0;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .94), 0 7px 18px rgba(8, 68, 105, .12);
  }

  #iwifi-workflow .iwftl-node svg {
    width: 18px;
    height: 18px;
  }

  #iwifi-workflow .grow .iwftl-node {
    width: 50px;
    height: 50px;
    box-shadow: 0 0 0 7px rgba(22, 185, 231, .07), 0 10px 24px rgba(10, 106, 157, .22);
  }

  #iwifi-workflow .grow .iwftl-node svg {
    width: 22px;
    height: 22px;
  }

  #iwifi-workflow .iwftl-copy,
  #iwifi-workflow .top .iwftl-copy,
  #iwifi-workflow .bottom .iwftl-copy,
  #iwifi-workflow .grow .iwftl-copy,
  #iwifi-workflow .grow.top .iwftl-copy {
    position: absolute;
    left: -8%;
    width: 116%;
    text-align: center;
  }

  #iwifi-workflow .top .iwftl-copy,
  #iwifi-workflow .grow.top .iwftl-copy {
    top: auto;
    bottom: 38px;
  }

  #iwifi-workflow .bottom .iwftl-copy {
    top: 38px;
    bottom: auto;
  }

  #iwifi-workflow .iwftl-copy:after,
  #iwifi-workflow .grow.top .iwftl-copy:after {
    display: block;
    height: 16px;
  }

  #iwifi-workflow .top .iwftl-copy:after,
  #iwifi-workflow .grow.top .iwftl-copy:after {
    bottom: -19px;
  }

  #iwifi-workflow .bottom .iwftl-copy:after {
    top: -19px;
  }

  #iwifi-workflow .iwftl-copy b {
    margin-bottom: 3px;
    font-size: 7px;
    letter-spacing: .8px;
    white-space: nowrap;
  }

  #iwifi-workflow .iwftl-copy h3,
  #iwifi-workflow .grow.top .iwftl-copy h3 {
    margin-bottom: 3px;
    font-size: 9px;
    line-height: 1.05;
    letter-spacing: -.05px;
    white-space: normal;
  }

  #iwifi-workflow .iwftl-copy h4 {
    margin-bottom: 3px;
    font-size: 6.4px;
    line-height: 1.15;
  }

  #iwifi-workflow .iwftl-copy p,
  #iwifi-workflow .grow.top .iwftl-copy p {
    font-size: 5.4px;
    line-height: 1.32;
  }

  #iwifi-workflow .iwftl-growhalo {
    left: 50%;
    top: 0;
    width: 66px;
    height: 66px;
  }

  #iwifi-workflow .iwftl-step:not(.grow):hover .iwftl-node {
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 390px) {
  #iwifi-workflow .iwftl-wrap {
    height: 326px;
  }

  #iwifi-workflow .iwftl-title {
    font-size: 30px;
  }

  #iwifi-workflow .iwftl-tagline {
    font-size: 15px;
  }

  #iwifi-workflow .iwftl-copy h3,
  #iwifi-workflow .grow.top .iwftl-copy h3 {
    font-size: 8px;
  }

  #iwifi-workflow .iwftl-copy h4 {
    font-size: 5.8px;
  }

  #iwifi-workflow .iwftl-copy p,
  #iwifi-workflow .grow.top .iwftl-copy p {
    font-size: 4.9px;
  }
}

/* ================================================================
   V21 — CONTINUOUS JOURNEY DOT: STEP 01 -> STEP 05
   A small glowing data point travels continuously across the timeline.
   ================================================================ */
#iwifi-workflow .iwftl-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #35d7ef 0%, #0797d5 68%, #20c58a 100%);
  border: 2px solid rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 4px rgba(22, 185, 231, .10), 0 0 14px rgba(22, 185, 231, .65), -10px 0 18px rgba(22, 185, 231, .20);
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 8;
  pointer-events: none;
}

#iwifi-workflow.is-visible .iwftl-line::after {
  animation: iwftlJourneyDot 5s linear 1.7s infinite;
}

@keyframes iwftlJourneyDot {
  0% {
    left: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.75)
  }

  3% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
  }

  96% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
  }

  100% {
    left: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.75)
  }
}

@media(max-width:767.98px) {
  #iwifi-workflow .iwftl-line::after {
    width: 7px;
    height: 7px;
    border-width: 1.5px;
    box-shadow: 0 0 0 3px rgba(22, 185, 231, .09), 0 0 10px rgba(22, 185, 231, .58), -7px 0 12px rgba(22, 185, 231, .16);
  }

  #iwifi-workflow.is-visible .iwftl-line::after {
    animation-duration: 4.6s
  }
}

@media(prefers-reduced-motion:reduce) {
  #iwifi-workflow .iwftl-line::after {
    display: none !important;
    animation: none !important
  }
}

/* ================================================================
   V22 — STRONG RUNNING DOT
   Higher-contrast journey marker: crisp core, white ring, compact glow.
   ================================================================ */
#iwifi-workflow .iwftl-line::after {
  width: 12px;
  height: 12px;
  background: #079bd8;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 4px rgba(7, 155, 216, .18),
    0 0 10px rgba(7, 155, 216, .72),
    -9px 0 12px rgba(7, 155, 216, .28);
}

@media(max-width:767.98px) {
  #iwifi-workflow .iwftl-line::after {
    width: 8px;
    height: 8px;
    border-width: 1.5px;
    box-shadow:
      0 0 0 3px rgba(7, 155, 216, .16),
      0 0 7px rgba(7, 155, 216, .68),
      -6px 0 9px rgba(7, 155, 216, .24);
  }
}

\n\n

/* V24 — centered workflow heading + IWIFI PRO brand emphasis */
#iwifi-workflow .iwftl-head {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#iwifi-workflow .iwftl-title {
  text-align: center;
}

#iwifi-workflow .iwftl-title .iwftl-brand {
  color: #00b0f0;
  display: inline;
}

#iwifi-workflow .iwftl-tagline {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#iwifi-workflow .iwftl-head>p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 767.98px) {
  #iwifi-workflow .iwftl-head {
    max-width: 100%;
    text-align: center;
  }

  #iwifi-workflow .iwftl-title,
  #iwifi-workflow .iwftl-tagline,
  #iwifi-workflow .iwftl-head>p {
    text-align: center;
  }

  #iwifi-workflow .iwftl-head>p {
    margin-left: auto;
    margin-right: auto;
  }
}

/* V25 — force true centered heading block */
#iwifi-workflow .iwftl-head {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 62px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#iwifi-workflow .iwftl-title,
#iwifi-workflow .iwftl-tagline,
#iwifi-workflow .iwftl-head>p {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#iwifi-workflow .iwftl-head>p {
  max-width: 700px !important;
}

#iwifi-workflow .iwftl-title .iwftl-brand {
  color: #00b0f0 !important;
}

@media (max-width: 767.98px) {
  #iwifi-workflow .iwftl-head {
    margin-bottom: 34px !important;
    align-items: center !important;
    text-align: center !important;
  }

  #iwifi-workflow .iwftl-title,
  #iwifi-workflow .iwftl-tagline,
  #iwifi-workflow .iwftl-head>p {
    width: 100% !important;
    text-align: center !important;
  }

  #iwifi-workflow .iwftl-head>p {
    max-width: 340px !important;
  }
}

/* ================================================================
   IWIFI PRO — OVERVIEW / IMPACT STATEMENT V3
   ================================================================ */
.iw-overview {
  position: relative;
  overflow: hidden;
  padding: 72px 0 68px;
  background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.iw-overview::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 760px;
  height: 320px;
  transform: translate(-50%, -44%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 176, 240, .075) 0%, rgba(0, 176, 240, .025) 42%, transparent 72%);
  pointer-events: none;
}

.iw-overview .container {
  position: relative;
  z-index: 1;
}

.iw-overview-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 54px;
}

.iw-overview-eyebrow {
  margin-bottom: 14px;
  color: #00a9e8;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .2em;
}

.iw-overview-head h2 {
  margin: 0;
  color: #101828;
  font-size: clamp(38px, 4.1vw, 60px);
  line-height: 1.02;
  font-weight: 760;
  letter-spacing: -.045em;
}

.iw-overview-head h2 span {
  color: #00b0f0;
}

.iw-overview-head p {
  margin: 15px 0 0;
  color: #667085;
  font-size: 16px;
  line-height: 1.55;
}

.iw-overview-impact {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1120px;
  margin: 0 auto;
  padding: 25px 0 20px;
}

.iw-network-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 176, 240, .55) 18%, #00b0f0 50%, rgba(0, 176, 240, .55) 82%, transparent);
  transform-origin: left center;
  animation: iwLineReveal 1.4s ease both;
}

.iw-network-line i {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #00b0f0;
  box-shadow: 0 0 0 5px rgba(0, 176, 240, .10), 0 4px 12px rgba(0, 176, 240, .22);
}

.iw-network-line i:nth-child(1) {
  left: 16.66%;
}

.iw-network-line i:nth-child(2) {
  left: 50%;
  transform: translateX(-50%);
}

.iw-network-line i:nth-child(3) {
  right: 16.66%;
}

.iw-overview-stat {
  text-align: center;
  padding: 16px 24px 8px;
  position: relative;
}

.iw-overview-value {
  color: #101828;
  font-size: clamp(54px, 5vw, 78px);
  line-height: .92;
  font-weight: 780;
  letter-spacing: -.06em;
  white-space: nowrap;
}

.iw-overview-value sup {
  display: inline-block;
  margin-left: 4px;
  color: #00b0f0;
  font-size: .46em;
  line-height: 1;
  font-weight: 760;
  vertical-align: top;
  transform: translateY(.08em);
  letter-spacing: 0;
}

.iw-overview-label {
  margin-top: 15px;
  color: #344054;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .085em;
}

.iw-overview-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 720px;
  margin: 29px auto 0;
  color: #98a2b3;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
}

.iw-overview-foot span {
  display: block;
  width: 70px;
  height: 1px;
  background: #dbe7ed;
}

@keyframes iwLineReveal {
  from {
    transform: scaleX(0);
    opacity: 0
  }

  to {
    transform: scaleX(1);
    opacity: 1
  }
}

@media (max-width:767px) {
  .iw-overview {
    padding: 58px 0 54px;
  }

  .iw-overview-head {
    margin-bottom: 38px;
    padding: 0 8px;
  }

  .iw-overview-head h2 {
    font-size: 38px;
  }

  .iw-overview-head p {
    font-size: 14px;
  }

  .iw-overview-impact {
    grid-template-columns: 1fr;
    padding: 0;
    max-width: 420px;
  }

  .iw-network-line {
    left: 24px;
    right: auto;
    top: 16px;
    bottom: 16px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, #00b0f0 18%, #00b0f0 82%, transparent);
    animation: none;
  }

  .iw-network-line i {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0;
  }

  .iw-network-line i:nth-child(1) {
    top: 16.5%;
  }

  .iw-network-line i:nth-child(2) {
    top: 50%;
  }

  .iw-network-line i:nth-child(3) {
    top: 83.5%;
  }

  .iw-overview-stat {
    text-align: left;
    padding: 20px 20px 20px 58px;
  }

  .iw-overview-value {
    font-size: 50px;
  }

  .iw-overview-label {
    margin-top: 9px;
    font-size: 11px;
  }

  .iw-overview-foot {
    margin-top: 26px;
    gap: 10px;
    font-size: 11px;
    text-align: center;
  }

  .iw-overview-foot span {
    width: 28px;
  }
}


/* ================================================================
   IWIFI PRO — OVERVIEW / CONNECTED NETWORK V4
   ================================================================ */
.iwnet-overview {
  position: relative;
  overflow: hidden;
  padding: 64px 0 54px;
  background: linear-gradient(180deg, #f8fbfd 0%, #f4f9fc 55%, #fff 100%);
  font-family: Inter, "Segoe UI", system-ui, sans-serif
}

.iwnet-overview:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 760px;
  height: 420px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 176, 240, .12) 0%, rgba(0, 176, 240, .045) 34%, transparent 68%);
  pointer-events: none
}

.iwnet-overview .container {
  position: relative;
  z-index: 1
}

.iwnet-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 24px
}

.iwnet-eyebrow {
  margin-bottom: 13px;
  color: #00a9e8;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .2em
}

.iwnet-head h2 {
  margin: 0;
  color: #101828;
  font-size: clamp(38px, 3.8vw, 56px);
  line-height: 1.04;
  font-weight: 770;
  letter-spacing: -.045em
}

.iwnet-head h2 span {
  color: #00ace8
}

.iwnet-head p {
  max-width: 590px;
  margin: 14px auto 0;
  color: #667085;
  font-size: 15px;
  line-height: 1.55
}

.iwnet-map {
  position: relative;
  max-width: 1160px;
  height: 350px;
  margin: 0 auto
}

.iwnet-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible
}

.iwnet-path {
  fill: none;
  stroke: rgba(0, 161, 218, .28);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 7 7
}

.iwnet-path-left,
.iwnet-path-right {
  animation: iwnetDash 12s linear infinite
}

.iwnet-path-down {
  stroke: rgba(0, 161, 218, .18);
  stroke-dasharray: 4 7
}

.iwnet-metric {
  position: absolute;
  top: 72px;
  width: 260px;
  text-align: center
}

.iwnet-left {
  left: 0
}

.iwnet-right {
  right: 0
}

.iwnet-dot {
  width: 10px;
  height: 10px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #13b5e6;
  border: 2px solid #fff;
  box-shadow: 0 0 0 7px rgba(19, 181, 230, .10), 0 0 22px rgba(19, 181, 230, .25)
}

.iwnet-number {
  color: #101828;
  font-size: clamp(48px, 4.5vw, 68px);
  line-height: .92;
  font-weight: 790;
  letter-spacing: -.065em;
  white-space: nowrap
}

.iwnet-number sup {
  display: inline-block;
  margin-left: 3px;
  color: #00ace8;
  font-size: .43em;
  line-height: 1;
  vertical-align: top;
  transform: translateY(.08em)
}

.iwnet-label {
  margin-top: 13px;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase
}

.iwnet-core {
  position: absolute;
  left: 50%;
  top: 42px;
  width: 250px;
  height: 250px;
  transform: translateX(-50%);
  display: grid;
  place-items: center
}

.iwnet-radar,
.iwnet-radar i {
  position: absolute;
  inset: 0;
  border-radius: 50%
}

.iwnet-radar {
  background: radial-gradient(circle, rgba(255, 255, 255, .96) 0 38%, rgba(235, 249, 254, .78) 39% 58%, transparent 59%);
  box-shadow: 0 22px 70px rgba(25, 130, 175, .10)
}

.iwnet-radar:before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0, 172, 232, .16)
}

.iwnet-radar i {
  border: 1px solid rgba(0, 172, 232, .16);
  animation: iwnetRing 3.6s ease-out infinite
}

.iwnet-radar i:nth-child(2) {
  animation-delay: 1.2s
}

.iwnet-radar i:nth-child(3) {
  animation-delay: 2.4s
}

.iwnet-core-inner {
  position: relative;
  z-index: 2;
  text-align: center
}

.iwnet-core .iwnet-number {
  font-size: clamp(58px, 5.3vw, 80px)
}

.iwnet-core .iwnet-label {
  color: #344054
}

.iwnet-caption {
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(700px, 80%);
  color: #98a2b3;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .13em;
  white-space: nowrap
}

.iwnet-caption span {
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9dce5)
}

.iwnet-caption span:last-child {
  background: linear-gradient(90deg, #c9dce5, transparent)
}

.iwnet-pulse {
  position: absolute;
  top: 116px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #21c4ec;
  box-shadow: 0 0 12px rgba(33, 196, 236, .85);
  opacity: 0
}

.iwnet-pulse-left {
  left: 11%;
  animation: iwnetPulseL 4.4s ease-in-out infinite
}

.iwnet-pulse-right {
  right: 11%;
  animation: iwnetPulseR 4.4s ease-in-out 2.2s infinite
}

@keyframes iwnetDash {
  to {
    stroke-dashoffset: -56
  }
}

@keyframes iwnetRing {
  0% {
    transform: scale(.55);
    opacity: .55
  }

  75%,
  100% {
    transform: scale(1);
    opacity: 0
  }
}

@keyframes iwnetPulseL {
  0% {
    left: 11%;
    top: 116px;
    opacity: 0
  }

  12% {
    opacity: 1
  }

  70% {
    left: 43%;
    top: 164px;
    opacity: 1
  }

  82%,
  100% {
    left: 46%;
    top: 164px;
    opacity: 0
  }
}

@keyframes iwnetPulseR {
  0% {
    right: 11%;
    top: 116px;
    opacity: 0
  }

  12% {
    opacity: 1
  }

  70% {
    right: 43%;
    top: 164px;
    opacity: 1
  }

  82%,
  100% {
    right: 46%;
    top: 164px;
    opacity: 0
  }
}

@media(max-width:767px) {
  .iwnet-overview {
    padding: 38px 0 34px
  }

  .iwnet-overview:before {
    top: 62%;
    width: 420px;
    height: 240px
  }

  .iwnet-head {
    margin-bottom: 18px;
    padding: 0 14px
  }

  .iwnet-eyebrow {
    margin-bottom: 9px;
    font-size: 9px;
    letter-spacing: .18em
  }

  .iwnet-head h2 {
    font-size: 27px;
    line-height: 1.05;
    letter-spacing: -.04em
  }

  .iwnet-head p {
    max-width: 330px;
    margin-top: 9px;
    font-size: 11px;
    line-height: 1.45
  }

  /* Mobile keeps the same horizontal network composition as desktop. */
  .iwnet-map {
    position: relative;
    display: block;
    width: 100%;
    height: 178px;
    max-width: 520px;
    margin: 0 auto;
    padding: 0
  }

  .iwnet-lines {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
  }

  .iwnet-path {
    stroke-width: 1;
    stroke-dasharray: 5 6
  }

  .iwnet-pulse {
    display: block;
    top: 62px;
    width: 5px;
    height: 5px
  }

  .iwnet-pulse-left {
    left: 12%;
    animation: iwnetPulseLMobile 4.4s ease-in-out infinite
  }

  .iwnet-pulse-right {
    right: 12%;
    animation: iwnetPulseRMobile 4.4s ease-in-out 2.2s infinite
  }

  .iwnet-metric {
    position: absolute;
    top: 43px;
    width: 29%;
    padding: 0;
    text-align: center
  }

  .iwnet-left {
    left: 1% !important;
    right: auto !important
  }

  .iwnet-right {
    right: 1% !important;
    left: auto !important
  }

  .iwnet-metric .iwnet-dot {
    width: 7px;
    height: 7px;
    margin: 0 auto 9px;
    border-width: 1.5px;
    box-shadow: 0 0 0 4px rgba(19, 181, 230, .09), 0 0 12px rgba(19, 181, 230, .2)
  }

  .iwnet-metric .iwnet-number {
    font-size: clamp(27px, 8vw, 36px);
    letter-spacing: -.06em
  }

  .iwnet-number sup {
    margin-left: 1px;
    font-size: .4em
  }

  .iwnet-label {
    margin-top: 7px;
    font-size: 7px;
    letter-spacing: .07em;
    white-space: nowrap
  }

  .iwnet-core {
    position: absolute;
    left: 50%;
    top: 22px;
    width: 132px;
    height: 132px;
    transform: translateX(-50%)
  }

  .iwnet-radar:before {
    inset: 14px
  }

  .iwnet-core .iwnet-number {
    font-size: 42px
  }

  .iwnet-core .iwnet-label {
    max-width: 92px;
    margin: 7px auto 0;
    font-size: 7px;
    line-height: 1.3;
    white-space: normal
  }

  .iwnet-caption {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 94%;
    margin: 0;
    gap: 7px;
    font-size: 6px;
    letter-spacing: .08em;
    white-space: nowrap
  }

  .iwnet-caption span {
    width: 18px;
    flex: 0 0 18px
  }
}

@keyframes iwnetPulseLMobile {
  0% {
    left: 12%;
    top: 62px;
    opacity: 0
  }

  12% {
    opacity: 1
  }

  70% {
    left: 42%;
    top: 88px;
    opacity: 1
  }

  82%,
  100% {
    left: 45%;
    top: 88px;
    opacity: 0
  }
}

@keyframes iwnetPulseRMobile {
  0% {
    right: 12%;
    top: 62px;
    opacity: 0
  }

  12% {
    opacity: 1
  }

  70% {
    right: 42%;
    top: 88px;
    opacity: 1
  }

  82%,
  100% {
    right: 45%;
    top: 88px;
    opacity: 0
  }
}

@media(prefers-reduced-motion:reduce) {

  .iwnet-path,
  .iwnet-radar i,
  .iwnet-pulse {
    animation: none !important
  }
}


/* ================================================================
   IWIFI PRO — WIFI MARKETING + CRM / FORMULA SECTION
   ================================================================ */
.iwformula-section {
  position: relative;
  overflow: hidden;
  padding: 78px 0 84px;
  background: linear-gradient(180deg, #fff 0%, #f6fbff 100%);
  font-family: Inter, "Segoe UI", system-ui, sans-serif
}

.iwformula-section:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 66%;
  width: 900px;
  height: 360px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(0, 176, 240, .10), transparent 67%);
  pointer-events: none
}

.iwformula-section .container {
  position: relative;
  z-index: 1
}

.iwformula-head {
  max-width: 790px;
  margin: 0 auto 48px;
  text-align: center
}

.iwformula-eyebrow {
  margin-bottom: 13px;
  color: #00a9e8;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2em
}

.iwformula-head h2 {
  margin: 0;
  color: #101828;
  font-size: clamp(40px, 4.2vw, 62px);
  line-height: 1.02;
  font-weight: 780;
  letter-spacing: -.05em
}

.iwformula-head h2 span {
  color: #00ace8
}

.iwformula-head p {
  max-width: 680px;
  margin: 16px auto 0;
  color: #667085;
  font-size: 16px;
  line-height: 1.6
}

.iwformula-flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 62px 1fr 72px 1.18fr;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto
}

.iwformula-track {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 54px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 176, 240, .08), rgba(0, 176, 240, .48), rgba(0, 176, 240, .08));
  z-index: 0
}

.iwformula-track i {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00b0f0;
  box-shadow: 0 0 15px rgba(0, 176, 240, .8);
  animation: iwformulaPulse 5.5s ease-in-out infinite
}

.iwformula-stage {
  position: relative;
  z-index: 1;
  min-height: 315px;
  padding: 38px 30px 30px;
  border-top: 2px solid rgba(0, 176, 240, .2);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  transition: transform .35s ease, box-shadow .35s ease
}

.iwformula-stage:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 55px rgba(21, 91, 126, .09)
}

.iwformula-wifi {
  border-radius: 28px 0 0 28px
}

.iwformula-crm {
  border-radius: 0
}

.iwformula-result {
  border: 0;
  border-radius: 28px;
  background: linear-gradient(145deg, #0953ba 0%, #083c91 100%);
  box-shadow: 0 28px 65px rgba(8, 60, 145, .22);
  color: #fff;
  transform: translateY(-10px)
}

.iwformula-result:hover {
  transform: translateY(-15px)
}

.iwformula-step {
  position: absolute;
  right: 24px;
  top: 20px;
  color: #b7ddeb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em
}

.iwformula-result .iwformula-step {
  color: rgba(255, 255, 255, .38)
}

.iwformula-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: #e8f8fe;
  color: #00a9e8;
  font-size: 21px
}

.iwformula-stage h3 {
  margin: 0 0 12px;
  color: #101828;
  font-size: 25px;
  line-height: 1.12;
  font-weight: 760;
  letter-spacing: -.035em
}

.iwformula-stage>p {
  min-height: 48px;
  margin: 0 0 24px;
  color: #667085;
  font-size: 14px;
  line-height: 1.55
}

.iwformula-tags,
.iwformula-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.iwformula-tags span {
  padding: 7px 10px;
  border: 1px solid #d9edf5;
  border-radius: 999px;
  background: #f8fcfe;
  color: #344054;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap
}

.iwformula-operator {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  align-self: center
}

.iwformula-operator span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #ccecf8;
  border-radius: 50%;
  background: #fff;
  color: #00a9e8;
  font-size: 25px;
  font-weight: 500;
  box-shadow: 0 8px 25px rgba(0, 155, 211, .12)
}

.iwformula-arrow span {
  background: #00ace8;
  color: #fff;
  border-color: #00ace8;
  font-size: 22px
}

.iwformula-brand {
  margin: 4px 0 22px;
  color: #fff;
  font-size: 35px;
  line-height: 1;
  font-weight: 780;
  letter-spacing: -.045em
}

.iwformula-brand span {
  color: #37d5ff
}

.iwformula-result h3 {
  color: #fff;
  font-size: 27px
}

.iwformula-result>p {
  color: rgba(255, 255, 255, .72)
}

.iwformula-outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px
}

.iwformula-outcomes span {
  position: relative;
  padding-left: 17px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4
}

.iwformula-outcomes span:before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38d6ff;
  box-shadow: 0 0 0 4px rgba(56, 214, 255, .12)
}

@keyframes iwformulaPulse {
  0% {
    left: 0;
    opacity: 0
  }

  10% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    left: 100%;
    opacity: 0
  }
}

@media(max-width:767px) {
  .iwformula-section {
    padding: 48px 0 52px
  }

  .iwformula-head {
    margin-bottom: 28px;
    padding: 0 14px
  }

  .iwformula-eyebrow {
    margin-bottom: 9px;
    font-size: 9px;
    letter-spacing: .17em
  }

  .iwformula-head h2 {
    font-size: 30px;
    line-height: 1.04
  }

  .iwformula-head p {
    max-width: 340px;
    margin-top: 11px;
    font-size: 12px;
    line-height: 1.5
  }

  .iwformula-flow {
    grid-template-columns: 1fr 38px 1fr;
    grid-template-areas: "wifi plus crm" "result result result";
    gap: 14px 0;
    padding: 0 14px
  }

  .iwformula-track {
    display: none
  }

  .iwformula-wifi {
    grid-area: wifi
  }

  .iwformula-crm {
    grid-area: crm
  }

  .iwformula-flow>.iwformula-operator:not(.iwformula-arrow) {
    grid-area: plus
  }

  .iwformula-arrow {
    display: none
  }

  .iwformula-result {
    grid-area: result
  }

  .iwformula-stage {
    min-height: 0;
    padding: 20px 14px 17px;
    border-top-width: 1px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .055)
  }

  .iwformula-stage:hover {
    transform: none
  }

  .iwformula-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 15px;
    font-size: 16px
  }

  .iwformula-step {
    right: 12px;
    top: 12px;
    font-size: 8px
  }

  .iwformula-stage h3 {
    margin-bottom: 8px;
    font-size: 17px
  }

  .iwformula-stage>p {
    min-height: 0;
    margin-bottom: 14px;
    font-size: 10px;
    line-height: 1.45
  }

  .iwformula-tags {
    gap: 5px
  }

  .iwformula-tags span {
    padding: 5px 7px;
    font-size: 8px
  }

  .iwformula-operator span {
    width: 30px;
    height: 30px;
    font-size: 18px
  }

  .iwformula-result {
    margin-top: 4px;
    padding: 23px 20px 22px;
    border-radius: 22px;
    transform: none;
    box-shadow: 0 20px 45px rgba(8, 60, 145, .20)
  }

  .iwformula-result:hover {
    transform: none
  }

  .iwformula-brand {
    margin: 0 0 13px;
    font-size: 28px
  }

  .iwformula-result h3 {
    font-size: 20px
  }

  .iwformula-result>p {
    font-size: 11px;
    margin-bottom: 17px
  }

  .iwformula-outcomes {
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px
  }

  .iwformula-outcomes span {
    padding-left: 13px;
    font-size: 9px
  }

  .iwformula-outcomes span:before {
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 3px rgba(56, 214, 255, .12)
  }
}

@media(prefers-reduced-motion:reduce) {
  .iwformula-track i {
    animation: none !important
  }
}



/* Mobile premium composition — formula stays visual, not card-heavy */
@media(max-width:767px) {
  .iwformula-section {
    padding: 42px 0 46px;
    background: linear-gradient(180deg, #f8fcff 0%, #fff 100%)
  }

  .iwformula-section:before {
    top: 62%;
    width: 520px;
    height: 260px;
    background: radial-gradient(ellipse, rgba(0, 176, 240, .12), transparent 68%)
  }

  .iwformula-head {
    margin-bottom: 24px;
    padding: 0 20px
  }

  .iwformula-eyebrow {
    font-size: 8px;
    letter-spacing: .22em
  }

  .iwformula-head h2 {
    font-size: 29px;
    letter-spacing: -.045em
  }

  .iwformula-head p {
    max-width: 310px;
    font-size: 11px;
    line-height: 1.55;
    color: #758198
  }

  .iwformula-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    grid-template-areas: "wifi plus crm" "result result result";
    gap: 14px 0;
    padding: 0 18px
  }

  .iwformula-wifi {
    grid-area: wifi
  }

  .iwformula-crm {
    grid-area: crm
  }

  .iwformula-flow>.iwformula-operator:not(.iwformula-arrow) {
    grid-area: plus
  }

  .iwformula-arrow {
    display: none
  }

  .iwformula-result {
    grid-area: result
  }

  .iwformula-stage {
    padding: 18px 12px 15px;
    min-height: 150px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center
  }

  .iwformula-wifi {
    border-right: 1px solid #dcebf2
  }

  .iwformula-crm {
    border-left: 1px solid #eef6f9
  }

  .iwformula-step {
    display: none
  }

  .iwformula-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 11px;
    background: #e9f9ff;
    font-size: 15px
  }

  .iwformula-stage h3 {
    margin: 0 0 8px;
    font-size: 16px
  }

  .iwformula-stage>p {
    display: none
  }

  .iwformula-tags {
    justify-content: center;
    gap: 5px 4px
  }

  .iwformula-tags span {
    padding: 4px 6px;
    border: 0;
    background: #eef9fd;
    color: #506176;
    font-size: 7.5px;
    font-weight: 700
  }

  .iwformula-operator {
    align-self: center
  }

  .iwformula-operator span {
    width: 26px;
    height: 26px;
    border: 0;
    background: #00ace8;
    color: #fff;
    font-size: 17px;
    box-shadow: 0 7px 18px rgba(0, 172, 232, .2)
  }

  .iwformula-result {
    position: relative;
    margin-top: 3px;
    padding: 21px 20px 20px;
    border-radius: 20px;
    text-align: left;
    background: linear-gradient(135deg, #0754bd 0%, #073985 100%);
    box-shadow: 0 18px 42px rgba(7, 57, 133, .20);
    overflow: hidden
  }

  .iwformula-result:before {
    content: "";
    position: absolute;
    right: -36px;
    top: -54px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(71, 218, 255, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(71, 218, 255, .035), 0 0 0 45px rgba(71, 218, 255, .025)
  }

  .iwformula-brand {
    position: relative;
    margin: 0 0 9px;
    font-size: 27px
  }

  .iwformula-result h3 {
    position: relative;
    margin-bottom: 7px;
    font-size: 18px;
    max-width: 230px
  }

  .iwformula-result>p {
    display: block;
    position: relative;
    margin: 0 0 14px;
    max-width: 280px;
    font-size: 10px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72)
  }

  .iwformula-outcomes {
    position: relative;
    grid-template-columns: 1fr 1fr;
    gap: 8px 9px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12)
  }

  .iwformula-outcomes span {
    font-size: 8.5px;
    line-height: 1.35
  }
}

/* ================================================================
   FORMULA V2 — MONOCHROME NAVY + ELECTRIC CYAN
   ================================================================ */
.iwformula-section {
  --iw-navy: #071a3d;
  --iw-navy-2: #0a2f68;
  --iw-cyan: #08afe6;
  --iw-ink: #101828;
  --iw-muted: #667085;
  background: #fff;
  padding: 72px 0 82px;
}

.iwformula-section:before {
  left: 76%;
  top: 61%;
  width: 680px;
  height: 420px;
  background: radial-gradient(ellipse, rgba(8, 175, 230, .09), transparent 68%);
}

.iwformula-head {
  max-width: 850px;
  margin-bottom: 52px
}

.iwformula-eyebrow {
  color: var(--iw-cyan)
}

.iwformula-head h2 {
  color: var(--iw-navy)
}

.iwformula-head h2 span {
  color: var(--iw-cyan)
}

.iwformula-head p {
  color: var(--iw-muted)
}

.iwformula-flow {
  grid-template-columns: 1fr 58px 1fr 72px 1.18fr;
  max-width: 1190px
}

.iwformula-track {
  left: 6%;
  right: 8%;
  top: 48%;
  height: 1px;
  background: linear-gradient(90deg, rgba(8, 175, 230, .08), rgba(8, 175, 230, .58), rgba(8, 175, 230, .10))
}

.iwformula-track:after {
  content: "";
  position: absolute;
  inset: -16px 0;
  background: linear-gradient(90deg, transparent, rgba(8, 175, 230, .035), transparent);
  filter: blur(10px)
}

.iwformula-track i {
  background: var(--iw-cyan);
  box-shadow: 0 0 0 5px rgba(8, 175, 230, .08), 0 0 22px rgba(8, 175, 230, .8)
}

/* Inputs: editorial, open and light — not blue cards */
.iwformula-stage {
  min-height: 300px;
  padding: 34px 30px 28px;
  border: 0;
  border-top: 1px solid #dce9ef;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none
}

.iwformula-stage:hover {
  transform: translateY(-3px);
  box-shadow: none
}

.iwformula-wifi {
  border-radius: 0
}

.iwformula-crm {
  border-radius: 0
}

.iwformula-step {
  right: 4px;
  top: 15px;
  color: #b6c8d3
}

.iwformula-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 26px;
  border: 1px solid #d9eef5;
  background: #f4fbfd;
  color: var(--iw-cyan);
  box-shadow: 0 8px 24px rgba(8, 175, 230, .07)
}

.iwformula-stage h3 {
  color: var(--iw-navy);
  font-size: 24px
}

.iwformula-stage>p {
  color: var(--iw-muted)
}

.iwformula-tags {
  gap: 7px
}

.iwformula-tags span {
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  background: #f3f6f8;
  color: #344054;
  font-size: 11px;
  font-weight: 650
}

/* Operators share one accent language */
.iwformula-operator span {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(8, 175, 230, .28);
  background: #fff;
  color: var(--iw-cyan);
  box-shadow: 0 8px 26px rgba(8, 175, 230, .10)
}

.iwformula-arrow span {
  border-color: var(--iw-cyan);
  background: var(--iw-cyan);
  color: #fff;
  box-shadow: 0 10px 30px rgba(8, 175, 230, .22)
}

/* Destination: the only strong colour block */
.iwformula-result {
  min-height: 326px;
  padding: 38px 34px 32px;
  border: 0;
  border-radius: 30px;
  background:
    radial-gradient(circle at 85% 15%, rgba(39, 211, 255, .18), transparent 30%),
    linear-gradient(145deg, var(--iw-navy) 0%, var(--iw-navy-2) 100%);
  box-shadow: 0 30px 72px rgba(7, 26, 61, .22), 0 8px 24px rgba(8, 175, 230, .08);
  transform: translateY(-13px);
  overflow: hidden;
}

.iwformula-result:after {
  content: "";
  position: absolute;
  right: -90px;
  top: -105px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(55, 213, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(55, 213, 255, .025), 0 0 0 72px rgba(55, 213, 255, .018);
  pointer-events: none
}

.iwformula-result:hover {
  transform: translateY(-17px)
}

.iwformula-result .iwformula-step {
  right: 25px;
  top: 21px;
  color: rgba(255, 255, 255, .34)
}

.iwformula-brand {
  position: relative;
  z-index: 1;
  margin: 2px 0 24px;
  font-size: 36px;
  color: #fff
}

.iwformula-brand span {
  color: #35d4ff
}

.iwformula-result h3 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 28px
}

.iwformula-result>p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, .70)
}

.iwformula-outcomes {
  position: relative;
  z-index: 1;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .10)
}

.iwformula-outcomes span:before {
  background: #35d4ff;
  box-shadow: 0 0 0 4px rgba(53, 212, 255, .10), 0 0 14px rgba(53, 212, 255, .25)
}

@media(max-width:767px) {
  .iwformula-section {
    padding: 42px 0 48px;
    background: #fff
  }

  .iwformula-section:before {
    left: 70%;
    top: 70%;
    width: 430px;
    height: 280px;
    background: radial-gradient(ellipse, rgba(8, 175, 230, .08), transparent 70%)
  }

  .iwformula-head {
    margin-bottom: 28px;
    padding: 0 18px
  }

  .iwformula-head h2 {
    font-size: 29px
  }

  .iwformula-head p {
    color: #738095
  }

  .iwformula-flow {
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 16px 0;
    padding: 0 16px
  }

  .iwformula-stage {
    min-height: 142px;
    padding: 16px 10px 14px;
    border-top: 1px solid #dfeaf0;
    text-align: center;
    background: transparent;
    box-shadow: none
  }

  .iwformula-wifi {
    border-right: 0
  }

  .iwformula-crm {
    border-left: 0
  }

  .iwformula-icon {
    width: 31px;
    height: 31px;
    margin: 0 auto 11px;
    border: 1px solid #d9eef5;
    background: #f5fbfd
  }

  .iwformula-stage h3 {
    font-size: 16px;
    color: var(--iw-navy)
  }

  .iwformula-tags {
    gap: 5px 4px
  }

  .iwformula-tags span {
    padding: 4px 6px;
    background: #f2f5f7;
    color: #4b596b;
    font-size: 7.5px
  }

  .iwformula-operator span {
    width: 27px;
    height: 27px;
    border: 0;
    background: var(--iw-cyan);
    color: #fff;
    box-shadow: 0 8px 20px rgba(8, 175, 230, .18)
  }

  .iwformula-result {
    margin-top: 2px;
    min-height: 0;
    padding: 23px 20px 21px;
    border-radius: 22px;
    text-align: left;
    background: radial-gradient(circle at 90% 8%, rgba(53, 212, 255, .17), transparent 34%), linear-gradient(145deg, #071a3d 0%, #0a2f68 100%);
    box-shadow: 0 20px 46px rgba(7, 26, 61, .22);
    transform: none
  }

  .iwformula-result:hover {
    transform: none
  }

  .iwformula-result:after {
    right: -62px;
    top: -75px;
    width: 170px;
    height: 170px;
    box-shadow: 0 0 0 24px rgba(55, 213, 255, .022), 0 0 0 48px rgba(55, 213, 255, .016)
  }

  .iwformula-brand {
    margin-bottom: 12px;
    font-size: 28px
  }

  .iwformula-result h3 {
    font-size: 19px
  }

  .iwformula-result>p {
    font-size: 10px;
    color: rgba(255, 255, 255, .70)
  }

  .iwformula-outcomes {
    padding-top: 12px
  }

  .iwformula-outcomes span {
    font-size: 8.5px
  }
}

/* ===== iWiFi formula hotfix: icon visibility + mobile contrast ===== */
.iwformula-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #08afe6 !important;
}

.iwformula-icon i {
  display: block !important;
  color: inherit !important;
  font-size: 20px !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

.iwformula-result,
.iwformula-result * {
  box-sizing: border-box
}

.iwformula-result .iwformula-brand {
  color: #fff !important
}

.iwformula-result .iwformula-brand span {
  color: #35d4ff !important
}

.iwformula-result h3 {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .08)
}

.iwformula-result>p {
  color: rgba(255, 255, 255, .78) !important
}

.iwformula-result .iwformula-outcomes span {
  color: #fff !important
}

@media (max-width: 767px) {
  .iwformula-section {
    padding: 36px 0 42px !important
  }

  .iwformula-head {
    margin-bottom: 22px !important
  }

  .iwformula-head h2 {
    font-size: 27px !important;
    line-height: 1.05 !important
  }

  .iwformula-head p {
    font-size: 11px !important;
    line-height: 1.55 !important
  }

  .iwformula-flow {
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) !important;
    grid-template-areas: "wifi plus crm" "result result result" !important;
    gap: 12px 0 !important;
  }

  .iwformula-wifi {
    grid-area: wifi !important
  }

  .iwformula-crm {
    grid-area: crm !important
  }

  .iwformula-flow>.iwformula-operator:not(.iwformula-arrow) {
    grid-area: plus !important
  }

  .iwformula-result {
    grid-area: result !important
  }

  .iwformula-arrow {
    display: none !important
  }

  .iwformula-track {
    display: none !important
  }

  .iwformula-stage {
    min-height: 148px !important;
    padding: 15px 8px 13px !important;
    border-top: 1px solid #dcebf2 !important;
  }

  .iwformula-icon {
    width: 36px !important;
    height: 36px !important;
    margin: 0 auto 10px !important;
    border: 1px solid #d7edf5 !important;
    border-radius: 50% !important;
    background: #f2fbfe !important;
  }

  .iwformula-icon i {
    font-size: 18px !important
  }

  .iwformula-stage h3 {
    font-size: 16px !important;
    color: #071a3d !important
  }

  .iwformula-tags span {
    font-size: 7.8px !important;
    color: #445166 !important;
    background: #f1f4f6 !important
  }

  .iwformula-result {
    min-height: 0 !important;
    margin-top: 6px !important;
    padding: 22px 20px 20px !important;
    border: 1px solid rgba(53, 212, 255, .12) !important;
    border-radius: 20px !important;
    background: radial-gradient(circle at 92% 4%, rgba(53, 212, 255, .16), transparent 34%), linear-gradient(145deg, #061832 0%, #0a326c 100%) !important;
    box-shadow: 0 18px 42px rgba(7, 26, 61, .20) !important;
  }

  .iwformula-result .iwformula-brand {
    font-size: 28px !important;
    color: #fff !important;
    margin: 0 0 12px !important
  }

  .iwformula-result h3 {
    font-size: 19px !important;
    line-height: 1.15 !important;
    color: #fff !important;
    margin: 0 0 9px !important;
    max-width: 250px !important
  }

  .iwformula-result>p {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, .78) !important;
    margin: 0 0 14px !important
  }

  .iwformula-outcomes {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 10px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important
  }

  .iwformula-result .iwformula-outcomes span {
    font-size: 8.5px !important;
    line-height: 1.35 !important;
    color: #fff !important
  }
}

/* PC: remove animated connector track because it overlaps the content */
@media (min-width: 768px) {
  .iwformula-track {
    display: none !important;
  }
}

/* ================================================================
   IWIFI PLATFORM — SCROLL REVEAL
   ================================================================ */
.iwformula-section .iwformula-head,
.iwformula-section .iwformula-wifi,
.iwformula-section .iwformula-flow>.iwformula-operator:not(.iwformula-arrow),
.iwformula-section .iwformula-crm,
.iwformula-section .iwformula-arrow,
.iwformula-section .iwformula-result {
  opacity: 0;
  will-change: transform, opacity, filter;
}

.iwformula-section .iwformula-head {
  transform: translateY(24px);
}

.iwformula-section .iwformula-wifi {
  transform: translateY(30px);
}

.iwformula-section .iwformula-flow>.iwformula-operator:not(.iwformula-arrow) {
  transform: scale(.72);
}

.iwformula-section .iwformula-crm {
  transform: translateY(30px);
}

.iwformula-section .iwformula-arrow {
  transform: translateX(-16px) scale(.82);
}

.iwformula-section .iwformula-result {
  transform: translateY(26px) scale(.97);
  filter: blur(3px);
}

.iwformula-section.is-visible .iwformula-head {
  animation: iwFormulaFadeUp .65s cubic-bezier(.22, 1, .36, 1) .05s forwards;
}

.iwformula-section.is-visible .iwformula-wifi {
  animation: iwFormulaFadeUp .65s cubic-bezier(.22, 1, .36, 1) .18s forwards;
}

.iwformula-section.is-visible .iwformula-flow>.iwformula-operator:not(.iwformula-arrow) {
  animation: iwFormulaPop .48s cubic-bezier(.34, 1.56, .64, 1) .38s forwards;
}

.iwformula-section.is-visible .iwformula-crm {
  animation: iwFormulaFadeUp .65s cubic-bezier(.22, 1, .36, 1) .48s forwards;
}

.iwformula-section.is-visible .iwformula-arrow {
  animation: iwFormulaArrow .5s cubic-bezier(.22, 1, .36, 1) .70s forwards;
}

.iwformula-section.is-visible .iwformula-result {
  animation: iwFormulaResult .78s cubic-bezier(.22, 1, .36, 1) .82s forwards;
}

.iwformula-section.is-visible .iwformula-result:after {
  animation: iwFormulaHalo 1.15s ease-out 1.05s both;
}

@keyframes iwFormulaFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes iwFormulaPop {
  0% {
    opacity: 0;
    transform: scale(.72);
  }

  70% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes iwFormulaArrow {
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes iwFormulaResult {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(.97);
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: translateY(-13px) scale(1);
    filter: blur(0);
  }
}

@keyframes iwFormulaHalo {
  0% {
    opacity: 0;
    transform: scale(.72);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width:767px) {
  .iwformula-section .iwformula-result {
    transform: translateY(22px) scale(.98);
  }

  .iwformula-section.is-visible .iwformula-result {
    animation-name: iwFormulaResultMobile;
  }

  @keyframes iwFormulaResultMobile {
    0% {
      opacity: 0;
      transform: translateY(22px) scale(.98);
      filter: blur(2px);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }
}

@media (prefers-reduced-motion:reduce) {

  .iwformula-section .iwformula-head,
  .iwformula-section .iwformula-wifi,
  .iwformula-section .iwformula-flow>.iwformula-operator:not(.iwformula-arrow),
  .iwformula-section .iwformula-crm,
  .iwformula-section .iwformula-arrow,
  .iwformula-section .iwformula-result {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}


/* ================================================================
   CUSTOMER INTELLIGENCE — ONE HOLLOW ELLIPSE / KPI ORBIT
   ================================================================ */
.iwci-section {
  position: relative;
  overflow: hidden;
  padding: 92px 0 105px;
  background: #fff;
  font-family: Inter, Segoe UI, system-ui, sans-serif
}

.iwci-grid {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(620px, 1.28fr);
  gap: 52px;
  align-items: center
}

.iwci-copy {
  max-width: 490px
}

.iwci-eyebrow {
  margin-bottom: 17px;
  color: #00aeea;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .22em
}

.iwci-copy h2 {
  margin: 0 0 18px;
  color: #071a3d;
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -.045em;
  font-weight: 800
}

.iwci-copy h2 span {
  color: #00afea
}

.iwci-copy>p {
  max-width: 455px;
  margin: 0 0 30px;
  color: #68758b;
  font-size: 16px;
  line-height: 1.7
}

.iwci-points {
  display: grid;
  border-top: 1px solid #dce9ef
}

.iwci-points>div {
  display: grid;
  grid-template-columns: 155px 1fr;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid #e7eff3
}

.iwci-points strong {
  color: #071a3d;
  font-size: 13px;
  font-weight: 750
}

.iwci-points span {
  color: #7b8799;
  font-size: 12px
}

/* One visual object only: a hollow tilted ellipse. */
.iwci-visual {
  position: relative;
  height: 500px;
  min-width: 0;
  display: grid;
  place-items: center;
  perspective: 1100px;
  overflow: visible
}

.iwci-orbit-glow {
  display: none
}

.iwci-orbit {
  position: relative;
  width: 660px;
  height: 360px;
  transform: rotate(-9deg);
  transform-origin: center;
  isolation: isolate
}

.iwci-ring {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 570px;
  height: 230px;
  border: 2px solid rgba(0, 176, 240, .52);
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  box-shadow: 0 18px 32px rgba(7, 26, 61, .07), 0 0 18px rgba(0, 176, 240, .08)
}

.iwci-ring:before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(0, 176, 240, .13);
  border-radius: 50%
}

.iwci-ring:after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -23px;
  height: 24px;
  border-radius: 50%;
  background: rgba(7, 26, 61, .07);
  filter: blur(15px);
  z-index: -1
}

/* Every KPI sits ON the same ellipse path. Nothing floats separately. */
.iwci-metric {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 116px;
  min-height: 72px;
  padding: 10px 11px;
  border: 1px solid rgba(7, 26, 61, .10);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(7, 26, 61, .11);
  display: flex;
  flex-direction: column;
  justify-content: center;
  offset-path: ellipse(285px 115px at 0 0);
  offset-rotate: 0deg;
  animation: iwciOrbit 27s linear infinite;
  will-change: offset-distance;
  transform: translate(-50%, -50%) rotate(9deg)
}

.iwci-metric small {
  color: #748095;
  font-size: 7px;
  line-height: 1.15;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em
}

.iwci-metric b {
  margin: 3px 0 2px;
  color: #071a3d;
  font-size: 18px;
  line-height: 1;
  font-weight: 850
}

.iwci-metric span {
  color: #99a4b3;
  font-size: 6.8px;
  line-height: 1.2;
  font-weight: 600
}

.iwci-metric:before {
  content: "";
  position: absolute;
  left: 11px;
  top: -1px;
  width: 27px;
  height: 2px;
  border-radius: 2px;
  background: #00afea
}

.iwci-metric.m1 {
  animation-delay: 0s
}

.iwci-metric.m2 {
  animation-delay: -3s
}

.iwci-metric.m3 {
  animation-delay: -6s
}

.iwci-metric.m4 {
  animation-delay: -9s
}

.iwci-metric.m5 {
  animation-delay: -12s
}

.iwci-metric.m6 {
  animation-delay: -15s
}

.iwci-metric.m7 {
  animation-delay: -18s
}

.iwci-metric.m8 {
  animation-delay: -21s
}

.iwci-metric.m9 {
  animation-delay: -24s
}

@keyframes iwciOrbit {
  from {
    offset-distance: 0%
  }

  to {
    offset-distance: 100%
  }
}

.iwci-copy {
  opacity: 0;
  transform: translateX(-28px)
}

.iwci-orbit {
  opacity: 0
}

.iwci-section.is-visible .iwci-copy {
  animation: iwciCopy .7s cubic-bezier(.22, 1, .36, 1) .05s forwards
}

.iwci-section.is-visible .iwci-orbit {
  animation: iwciOrbitReveal .8s cubic-bezier(.22, 1, .36, 1) .15s forwards
}

@keyframes iwciCopy {
  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes iwciOrbitReveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97) rotate(-9deg)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(-9deg)
  }
}

@media(max-width:1100px) {
  .iwci-grid {
    grid-template-columns: minmax(280px, .8fr) minmax(520px, 1.2fr);
    gap: 28px
  }

  .iwci-orbit {
    transform: scale(.86) rotate(-9deg)
  }

  .iwci-section.is-visible .iwci-orbit {
    animation-name: iwciOrbitRevealTablet
  }

  @keyframes iwciOrbitRevealTablet {
    from {
      opacity: 0;
      transform: translateY(18px) scale(.83) rotate(-9deg)
    }

    to {
      opacity: 1;
      transform: scale(.86) rotate(-9deg)
    }
  }
}

@media(max-width:991px) {
  .iwci-section {
    padding: 70px 0 82px
  }

  .iwci-grid {
    grid-template-columns: 1fr;
    gap: 22px
  }

  .iwci-copy {
    max-width: 650px
  }

  .iwci-copy h2 {
    font-size: 40px
  }

  .iwci-visual {
    height: 430px
  }

  .iwci-orbit {
    transform: scale(.9) rotate(-9deg)
  }

  .iwci-section.is-visible .iwci-orbit {
    animation-name: iwciOrbitRevealTab
  }

  @keyframes iwciOrbitRevealTab {
    to {
      opacity: 1;
      transform: scale(.9) rotate(-9deg)
    }
  }
}

@media(max-width:767px) {
  .iwci-section {
    padding: 54px 0 62px
  }

  .iwci-grid {
    gap: 10px
  }

  .iwci-copy {
    text-align: center;
    margin: 0 auto
  }

  .iwci-eyebrow {
    font-size: 9px;
    margin-bottom: 12px
  }

  .iwci-copy h2 {
    font-size: 29px;
    line-height: 1.08;
    margin-bottom: 13px
  }

  .iwci-copy>p {
    max-width: 330px;
    margin: 0 auto 22px;
    font-size: 12px;
    line-height: 1.6
  }

  .iwci-points {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    border: 0
  }

  .iwci-points>div {
    display: block;
    padding: 10px 5px;
    border: 0;
    border-radius: 11px;
    background: #f6f9fb
  }

  .iwci-points strong {
    display: block;
    font-size: 9px;
    margin-bottom: 3px
  }

  .iwci-points span {
    display: none
  }

  .iwci-visual {
    height: 300px;
    margin-top: 0;
    overflow: visible
  }

  .iwci-orbit {
    transform: scale(.54) rotate(-9deg)
  }

  .iwci-section.is-visible .iwci-orbit {
    animation-name: iwciOrbitRevealMobile
  }

  @keyframes iwciOrbitRevealMobile {
    to {
      opacity: 1;
      transform: scale(.54) rotate(-9deg)
    }
  }
}

@media(max-width:420px) {
  .iwci-visual {
    height: 275px
  }

  .iwci-orbit {
    transform: scale(.48) rotate(-9deg)
  }

  .iwci-section.is-visible .iwci-orbit {
    animation-name: iwciOrbitRevealSmall
  }

  @keyframes iwciOrbitRevealSmall {
    to {
      opacity: 1;
      transform: scale(.48) rotate(-9deg)
    }
  }
}

@media(prefers-reduced-motion:reduce) {

  .iwci-copy,
  .iwci-orbit {
    opacity: 1 !important;
    animation: none !important
  }

  .iwci-metric {
    animation-play-state: paused !important
  }
}


/* ================================================================
   CUSTOMER INTELLIGENCE — 3D ELLIPTICAL CARD CAROUSEL
   Reference: cards form one continuous hollow ring, viewed in perspective.
   ================================================================ */
#customer-intelligence .iwci-visual {
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  perspective-origin: 50% 42%;
  overflow: visible;
}

#customer-intelligence .iwci-stage {
  position: relative;
  width: 720px;
  height: 390px;
  transform-style: preserve-3d;
  transform: rotateX(14deg) rotateZ(-2deg);
}

#customer-intelligence .iwci-carousel {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: iwciCarouselSpin 24s linear infinite;
}

#customer-intelligence .iwci-metric {
  --a: 0deg;
  position: absolute;
  left: 0;
  top: 0;
  width: 178px;
  height: 124px;
  min-height: 0;
  margin: -62px 0 0 -89px;
  padding: 18px 19px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(14, 42, 77, .10);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 38px rgba(20, 45, 75, .13);
  backface-visibility: visible;
  transform-style: preserve-3d;
  transform: rotateY(var(--a)) translateZ(315px);
  animation: none;
  offset-path: none;
  will-change: auto;
}

#customer-intelligence .iwci-metric:before {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  width: 42px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: #00afea;
}

#customer-intelligence .iwci-metric small {
  color: #738198;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

#customer-intelligence .iwci-metric b {
  margin: 7px 0 4px;
  color: #071a3d;
  font-size: 29px;
  line-height: .95;
  font-weight: 850;
}

#customer-intelligence .iwci-metric span {
  color: #9aa5b5;
  font-size: 9.5px;
  line-height: 1.25;
  font-weight: 650;
}

#customer-intelligence .iwci-metric.m1 {
  --a: 0deg
}

#customer-intelligence .iwci-metric.m2 {
  --a: 40deg
}

#customer-intelligence .iwci-metric.m3 {
  --a: 80deg
}

#customer-intelligence .iwci-metric.m4 {
  --a: 120deg
}

#customer-intelligence .iwci-metric.m5 {
  --a: 160deg
}

#customer-intelligence .iwci-metric.m6 {
  --a: 200deg
}

#customer-intelligence .iwci-metric.m7 {
  --a: 240deg
}

#customer-intelligence .iwci-metric.m8 {
  --a: 280deg
}

#customer-intelligence .iwci-metric.m9 {
  --a: 320deg
}

/* thin hollow ellipse under the cards: reinforces one continuous ring */
#customer-intelligence .iwci-floor-ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 650px;
  height: 190px;
  transform: translate(-50%, -50%) translateZ(-15px);
  border: 1.5px solid rgba(0, 175, 234, .24);
  border-radius: 50%;
  box-shadow: 0 24px 40px rgba(7, 26, 61, .08), 0 0 22px rgba(0, 175, 234, .07);
  pointer-events: none;
}

#customer-intelligence .iwci-floor-ring:after {
  content: "";
  position: absolute;
  inset: 14px 22px;
  border: 1px dashed rgba(0, 175, 234, .10);
  border-radius: 50%;
}

@keyframes iwciCarouselSpin {
  from {
    transform: rotateY(0deg)
  }

  to {
    transform: rotateY(-360deg)
  }
}

/* Reveal only the whole 3D object; do not animate the cards separately. */
#customer-intelligence .iwci-stage {
  opacity: 0;
  transform: translateY(18px) rotateX(14deg) rotateZ(-2deg) scale(.97)
}

#customer-intelligence.is-visible .iwci-stage {
  animation: iwciStageIn .8s cubic-bezier(.22, 1, .36, 1) .12s forwards
}

@keyframes iwciStageIn {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(14deg) rotateZ(-2deg) scale(1)
  }
}

@media(max-width:1100px) {
  #customer-intelligence .iwci-stage {
    scale: .84
  }
}

@media(max-width:991px) {
  #customer-intelligence .iwci-visual {
    height: 430px
  }

  #customer-intelligence .iwci-stage {
    scale: .88
  }
}

@media(max-width:767px) {
  #customer-intelligence .iwci-visual {
    height: 300px
  }

  #customer-intelligence .iwci-stage {
    scale: .58
  }

  #customer-intelligence .iwci-carousel {
    animation-duration: 28s
  }
}

@media(max-width:420px) {
  #customer-intelligence .iwci-visual {
    height: 270px
  }

  #customer-intelligence .iwci-stage {
    scale: .51
  }
}

@media(prefers-reduced-motion:reduce) {
  #customer-intelligence .iwci-stage {
    opacity: 1;
    animation: none !important
  }

  #customer-intelligence .iwci-carousel {
    animation: none !important
  }
}

/* Requested: remove blue guide ellipse beneath carousel */
#customer-intelligence .iwci-floor-ring {
  display: none !important;
}

/* ================================================================
   CUSTOMER INTELLIGENCE — DATA ORBIT PREMIUM
   Taller cards, tighter orbit, cleaner depth, no cyan guide lines.
   ================================================================ */
#customer-intelligence .iwci-stage {
  width: 680px;
  height: 390px;
  transform: translateY(18px) rotateX(10deg) rotateZ(-1deg) scale(.97);
}

#customer-intelligence.is-visible .iwci-stage {
  animation: iwciStagePremiumIn .8s cubic-bezier(.22, 1, .36, 1) .12s forwards;
}

@keyframes iwciStagePremiumIn {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(10deg) rotateZ(-1deg) scale(1)
  }
}

/* One soft shadow for the whole orbit instead of a cyan ellipse. */
#customer-intelligence .iwci-stage:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 69%;
  width: 500px;
  height: 72px;
  border-radius: 50%;
  background: rgba(7, 26, 61, .12);
  filter: blur(28px);
  transform: translate(-50%, -50%) translateZ(-80px);
  pointer-events: none;
  z-index: -1;
}

#customer-intelligence .iwci-carousel {
  top: 46%;
  animation-duration: 27s;
}

#customer-intelligence .iwci-metric {
  width: 184px;
  height: 168px;
  margin: -84px 0 0 -92px;
  padding: 25px 22px;
  border: 1px solid rgba(14, 42, 77, .075);
  border-radius: 24px;
  background: rgba(255, 255, 255, .965);
  box-shadow: 0 16px 34px rgba(20, 45, 75, .105);
  transform: rotateY(var(--a)) translateZ(270px);
  transition: box-shadow .25s ease, background .25s ease;
}

/* Remove the cyan accent on every KPI card. */
#customer-intelligence .iwci-metric:before {
  display: none !important;
  content: none !important;
}

#customer-intelligence .iwci-metric small {
  font-size: 10px;
  letter-spacing: .055em;
}

#customer-intelligence .iwci-metric b {
  margin: 9px 0 6px;
  font-size: 31px;
}

#customer-intelligence .iwci-metric span {
  font-size: 10px;
  line-height: 1.35;
}

/* No blue/dashed ellipse under the cards. */
#customer-intelligence .iwci-floor-ring,
#customer-intelligence .iwci-ring,
#customer-intelligence .iwci-orbit-glow {
  display: none !important;
}

@media(max-width:1100px) {
  #customer-intelligence .iwci-stage {
    scale: .88
  }
}

@media(max-width:991px) {
  #customer-intelligence .iwci-stage {
    scale: .9
  }
}

@media(max-width:767px) {
  #customer-intelligence .iwci-stage {
    scale: .60
  }

  #customer-intelligence .iwci-carousel {
    animation-duration: 30s
  }
}

@media(max-width:420px) {
  #customer-intelligence .iwci-stage {
    scale: .53
  }
}

/* ================================================================
   FINAL REFINEMENT — 2026-09-24
   Keep current layout; refine motion, depth and premium hierarchy.
   ================================================================ */

/* HERO — restrained premium perimeter glow. */
#hero .dashboard {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
}

#hero .dashboard::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: 30px;
  padding: 1px;
  background: linear-gradient(115deg,
      rgba(0, 175, 234, .10) 0%,
      rgba(0, 175, 234, .62) 18%,
      rgba(255, 255, 255, .95) 26%,
      rgba(0, 175, 234, .16) 36%,
      rgba(0, 175, 234, .08) 100%);
  background-size: 260% 260%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: iwHeroEdgeSweep 8s linear infinite;
  pointer-events: none;
}

#hero .dashboard::after {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -3;
  border-radius: 38px;
  background: rgba(0, 175, 234, .07);
  filter: blur(18px);
  opacity: .72;
  pointer-events: none;
}

@keyframes iwHeroEdgeSweep {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

/* HOW IWIFI — keep journey animation as the active motion language. */
#iwifi-workflow .iwftl-line span {
  animation-duration: 7.5s;
}

/* CUSTOMER INTELLIGENCE — final 3D orbit geometry. */
#customer-intelligence .iwci-visual {
  perspective: 1350px;
  perspective-origin: 50% 38%;
}

#customer-intelligence .iwci-stage {
  width: 700px;
  height: 400px;
  opacity: 0;
  transform: translateY(18px) rotateX(16deg) rotateZ(-4deg) scale(.97);
  transform-style: preserve-3d;
}

#customer-intelligence.is-visible .iwci-stage {
  animation: iwciStageFinalIn .9s cubic-bezier(.22, 1, .36, 1) .12s forwards;
}

@keyframes iwciStageFinalIn {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(16deg) rotateZ(-4deg) scale(1)
  }
}

#customer-intelligence .iwci-carousel {
  top: 45%;
  animation: iwciCarouselSpin 34s linear infinite;
}

#customer-intelligence .iwci-metric {
  width: 180px;
  height: 154px;
  margin: -77px 0 0 -90px;
  padding: 23px 21px;
  border-radius: 25px;
  border: 1px solid rgba(14, 42, 77, .065);
  background: rgba(255, 255, 255, .975);
  box-shadow: 0 14px 32px rgba(20, 45, 75, .10), 0 2px 8px rgba(20, 45, 75, .04);
  transform: rotateY(var(--a)) translateZ(285px);
}

#customer-intelligence .iwci-metric b {
  margin: 8px 0 5px;
  font-size: 30px;
}

#customer-intelligence .iwci-stage::after {
  top: 71%;
  width: 470px;
  height: 62px;
  background: rgba(7, 26, 61, .095);
  filter: blur(30px);
}

/* Give back cards enough visibility without making the orbit visually noisy. */
#customer-intelligence .iwci-metric {
  backface-visibility: visible;
}

@media(max-width:1100px) {
  #customer-intelligence .iwci-stage {
    scale: .86
  }
}

@media(max-width:991px) {
  #customer-intelligence .iwci-stage {
    scale: .88
  }
}

@media(max-width:767px) {
  #customer-intelligence .iwci-stage {
    scale: .59
  }

  #customer-intelligence .iwci-carousel {
    animation-duration: 38s
  }
}

@media(max-width:420px) {
  #customer-intelligence .iwci-stage {
    scale: .52
  }
}

/* Accessibility: ambient motion should stop for reduced-motion users. */
@media(prefers-reduced-motion:reduce) {

  #hero .dashboard::before,
  #customer-intelligence .iwci-carousel {
    animation: none !important;
  }

  #customer-intelligence .iwci-stage {
    opacity: 1 !important;
    transform: rotateX(16deg) rotateZ(-4deg) !important;
    animation: none !important;
  }
}

/* ================================================================
   FINAL SECTION RHYTHM — 2026-09-24
   Keep the first product-story sections visually connected.
   ================================================================ */
@media (min-width: 768px) {
  #iwifi-workflow.iwftl-section {
    padding-top: 64px !important;
    padding-bottom: 66px !important;
  }

  .iwformula-section {
    padding-top: 62px !important;
    padding-bottom: 66px !important;
  }

  .iwci-section {
    padding-top: 66px !important;
    padding-bottom: 70px !important;
  }

  #packages-v1.packages-v1 {
    padding-top: 56px !important;
    padding-bottom: 82px !important;
  }
}

@media (max-width: 767.98px) {
  #iwifi-workflow.iwftl-section {
    padding-top: 46px !important;
    padding-bottom: 48px !important;
  }

  .iwformula-section {
    padding-top: 42px !important;
    padding-bottom: 46px !important;
  }

  .iwci-section {
    padding-top: 46px !important;
    padding-bottom: 50px !important;
  }

  #packages-v1.packages-v1 {
    padding-top: 42px !important;
    padding-bottom: 60px !important;
  }
}

/* ================================================================
   MOBILE SPACING FIX — CUSTOMER INTELLIGENCE -> PACKAGES
   Compact the empty space below the orbit without changing card scale.
   ================================================================ */
@media (max-width: 767px) {
  #customer-intelligence.iwci-section {
    padding-bottom: 34px !important;
    min-height: 0 !important;
  }

  #customer-intelligence .iwci-grid {
    row-gap: 22px !important;
  }

  #customer-intelligence .iwci-visual {
    height: 270px !important;
    min-height: 270px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #customer-intelligence .iwci-stage {
    height: 270px !important;
    min-height: 270px !important;
    margin-bottom: 0 !important;
  }

  #packages-v1.packages-v1 {
    padding-top: 42px !important;
  }
}

@media (max-width: 480px) {
  #customer-intelligence.iwci-section {
    padding-bottom: 28px !important;
  }

  #customer-intelligence .iwci-visual,
  #customer-intelligence .iwci-stage {
    height: 250px !important;
    min-height: 250px !important;
  }

  #packages-v1.packages-v1 {
    padding-top: 36px !important;
  }
}


/* ================================================================
   IWIFI PRO ECOSYSTEM — PREMIUM PRODUCT SYSTEM
   Replaces legacy full-screen giaiphap.jpg banner
================================================================ */
.iweco-section {
  position: relative;
  overflow: hidden;
  padding: 126px 0 118px;
  background: linear-gradient(180deg, #fff 0%, #f6fbff 52%, #fff 100%);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: #082752
}

.iweco-section:before {
  content: "";
  position: absolute;
  width: 760px;
  height: 520px;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 176, 240, .12) 0%, rgba(0, 176, 240, .045) 40%, transparent 72%);
  filter: blur(12px);
  pointer-events: none
}

.iweco-head {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto 70px;
  text-align: center
}

.iweco-eyebrow {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .24em;
  color: #00aef0;
  margin-bottom: 20px
}

.iweco-head h2 {
  margin: 0;
  color: #082752;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 800
}

.iweco-head h2 span {
  color: #00aef0
}

.iweco-head p {
  max-width: 690px;
  margin: 24px auto 0;
  color: #70809b;
  font-size: 18px;
  line-height: 1.7
}

.iweco-map {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .92fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto
}

.iweco-panel,
.iweco-core {
  position: relative;
  border: 1px solid rgba(8, 39, 82, .08);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 24px 70px rgba(17, 72, 120, .10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px)
}

.iweco-panel {
  min-height: 420px;
  border-radius: 26px;
  padding: 38px 34px;
  transition: transform .45s ease, box-shadow .45s ease
}

.iweco-panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 80px rgba(17, 72, 120, .14)
}

.iweco-panel-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #effaff;
  color: #00aef0;
  font-size: 23px;
  margin-bottom: 28px;
  box-shadow: inset 0 0 0 1px rgba(0, 174, 240, .10)
}

.iweco-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  color: #00aef0;
  margin-bottom: 9px
}

.iweco-panel h3,
.iweco-core h3 {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.035em;
  color: #082752;
  margin: 0 0 14px;
  font-weight: 800
}

.iweco-panel p,
.iweco-core p {
  color: #73819a;
  font-size: 15px;
  line-height: 1.65;
  margin: 0
}

.iweco-list {
  display: grid;
  gap: 0;
  margin-top: 28px
}

.iweco-list span {
  position: relative;
  padding: 12px 0 12px 22px;
  border-top: 1px solid #e7eef5;
  color: #344867;
  font-size: 14px;
  font-weight: 650
}

.iweco-list span:before {
  content: "";
  position: absolute;
  left: 1px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00aef0;
  box-shadow: 0 0 0 5px rgba(0, 174, 240, .08);
  transform: translateY(-50%)
}

.iweco-integrations {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px
}

.iweco-integrations span,
.iweco-mini span,
.iweco-actions span {
  border: 1px solid rgba(8, 39, 82, .08);
  background: #f7fafc;
  color: #314867;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700
}

.iweco-integrations span {
  padding: 11px 16px
}

.iweco-integrations span:first-child {
  background: #eef9ff;
  color: #008ed0;
  border-color: rgba(0, 174, 240, .14)
}

.iweco-core {
  min-height: 470px;
  border-radius: 32px;
  padding: 44px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-color: rgba(0, 174, 240, .18);
  box-shadow: 0 30px 90px rgba(0, 132, 205, .15)
}

.iweco-wifi {
  position: relative;
  z-index: 3;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fff, #eefaff);
  color: #00aef0;
  font-size: 48px;
  box-shadow: 0 18px 45px rgba(0, 174, 240, .18), inset 0 0 0 1px rgba(0, 174, 240, .12);
  margin-bottom: 24px
}

.iweco-radar {
  position: absolute;
  left: 50%;
  top: 114px;
  border: 1px solid rgba(0, 174, 240, .18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: iwecoPulse 4.8s ease-out infinite;
  pointer-events: none
}

.iweco-radar.r1 {
  width: 155px;
  height: 155px
}

.iweco-radar.r2 {
  width: 210px;
  height: 210px;
  animation-delay: 1.5s
}

.iweco-brand {
  font-size: 18px;
  font-weight: 800;
  color: #082752;
  margin-bottom: 8px
}

.iweco-brand span {
  color: #00aef0
}

.iweco-core h3 {
  font-size: 30px
}

.iweco-core p {
  max-width: 270px
}

.iweco-mini {
  display: flex;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px
}

.iweco-mini span {
  padding: 8px 10px;
  font-size: 10px;
  letter-spacing: .08em;
  color: #67809b;
  background: #fff
}

.iweco-line {
  position: absolute;
  top: 50%;
  height: 1px;
  width: 90px;
  background: linear-gradient(90deg, rgba(0, 174, 240, .06), rgba(0, 174, 240, .5), rgba(0, 174, 240, .06));
  z-index: 4;
  overflow: visible
}

.iweco-line-left {
  left: calc(33.33% - 25px)
}

.iweco-line-right {
  right: calc(33.33% - 25px)
}

.iweco-line i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00aef0;
  box-shadow: 0 0 14px rgba(0, 174, 240, .75);
  transform: translateY(-50%);
  animation: iwecoData 3.2s ease-in-out infinite
}

.iweco-line-right i {
  animation-direction: reverse;
  animation-delay: .7s
}

.iweco-automation {
  position: relative;
  z-index: 2;
  max-width: 940px;
  margin: 38px auto 0;
  padding: 24px 28px;
  border: 1px solid rgba(8, 39, 82, .07);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  box-shadow: 0 16px 50px rgba(17, 72, 120, .07)
}

.iweco-automation small {
  display: block;
  color: #00aef0;
  font-size: 11px;
  letter-spacing: .18em;
  font-weight: 800;
  margin-bottom: 5px
}

.iweco-automation strong {
  display: block;
  color: #082752;
  font-size: 17px
}

.iweco-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.iweco-actions span {
  padding: 9px 12px;
  background: #fff
}

@keyframes iwecoPulse {
  0% {
    opacity: .65;
    transform: translate(-50%, -50%) scale(.72)
  }

  70%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.16)
  }
}

@keyframes iwecoData {

  0%,
  100% {
    left: 0;
    opacity: .25
  }

  50% {
    left: calc(100% - 8px);
    opacity: 1
  }
}

@media(max-width:991px) {
  .iweco-section {
    padding: 96px 0 90px
  }

  .iweco-head {
    margin-bottom: 48px
  }

  .iweco-map {
    grid-template-columns: 1fr 1fr
  }

  .iweco-core {
    grid-column: 1/-1;
    grid-row: 1;
    max-width: 520px;
    width: 100%;
    margin: 0 auto 8px;
    min-height: 390px
  }

  .iweco-panel {
    min-height: 390px
  }

  .iweco-line {
    display: none
  }

  .iweco-automation {
    margin-top: 28px
  }
}

@media(max-width:767px) {
  .iweco-section {
    padding: 74px 0 70px
  }

  .iweco-head {
    text-align: left;
    margin-bottom: 34px
  }

  .iweco-eyebrow {
    font-size: 11px;
    margin-bottom: 14px
  }

  .iweco-head h2 {
    font-size: 38px
  }

  .iweco-head p {
    font-size: 16px;
    margin-top: 18px
  }

  .iweco-map {
    display: flex;
    flex-direction: column;
    gap: 16px
  }

  .iweco-core {
    order: 0;
    min-height: 330px;
    border-radius: 26px;
    padding: 34px 22px
  }

  .iweco-capture {
    order: 1
  }

  .iweco-connect {
    order: 2
  }

  .iweco-panel {
    width: 100%;
    min-height: 0;
    border-radius: 22px;
    padding: 28px 24px
  }

  .iweco-wifi {
    width: 92px;
    height: 92px;
    font-size: 40px
  }

  .iweco-radar {
    top: 96px
  }

  .iweco-radar.r1 {
    width: 130px;
    height: 130px
  }

  .iweco-radar.r2 {
    width: 175px;
    height: 175px
  }

  .iweco-automation {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 18px;
    padding: 22px
  }

  .iweco-actions {
    justify-content: flex-start
  }

  .iweco-integrations {
    margin-top: 22px
  }
}

@media(prefers-reduced-motion:reduce) {

  .iweco-radar,
  .iweco-line i {
    animation: none !important
  }
}

/* ================================================================
   IWIFI PRO ECOSYSTEM — FINAL IMAGE-LED VERSION
   Heading stays in HTML; infographic contains no duplicated title.
   ================================================================ */
.iweco-visual-section {
  position: relative;
  overflow: hidden;
  padding: 76px 0 84px;
  background:
    radial-gradient(circle at 50% 62%, rgba(0, 176, 240, .09), transparent 44%),
    linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}

.iweco-visual-head {
  max-width: 880px;
  margin: 0 auto 28px;
  padding: 0 24px;
  text-align: center;
}

.iweco-visual-head .iweco-eyebrow {
  margin-bottom: 10px;
  color: #168bd2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
}

.iweco-visual-head h2 {
  margin: 0 0 14px;
  color: #10234c;
  font-family: Inter, Segoe UI, system-ui, sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.04em;
}

.iweco-visual-head h2 span {
  color: #00aeea;
}

.iweco-visual-head p {
  max-width: 720px;
  margin: 0 auto;
  color: #65748b;
  font-size: 15px;
  line-height: 1.65;
}

.iweco-hero-visual {
  position: relative;
  box-sizing: border-box;
  width: min(1400px, calc(100vw - 96px));
  max-width: none;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  border-radius: 28px;
  overflow: hidden;
  background: #edf8ff;
  box-shadow: 0 26px 72px rgba(26, 91, 145, .14), 0 8px 24px rgba(19, 76, 125, .07);
}

.iweco-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 176, 240, .05);
}

.iweco-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

@media (max-width: 991px) {
  .iweco-visual-section {
    padding: 68px 0 72px;
  }

  .iweco-visual-head {
    margin-bottom: 24px;
  }

  .iweco-hero-visual {
    width: calc(100vw - 32px);
    border-radius: 24px;
  }
}

@media (max-width: 767px) {
  .iweco-visual-section {
    padding: 0 0 58px;
  }

  .iweco-visual-head {
    margin-bottom: 20px;
    padding: 0 16px;
  }

  .iweco-visual-head .iweco-eyebrow {
    font-size: 10px;
    letter-spacing: .17em;
  }

  .iweco-visual-head h2 {
    font-size: 32px;
    line-height: 1.08;
  }

  .iweco-visual-head p {
    font-size: 14px;
    line-height: 1.55;
  }

  .iweco-hero-visual {
    width: calc(100vw - 32px);
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(26, 91, 145, .13);
  }
}


/* ================================================================
   EXPLORE IWIFI PRO — single container / interactive rows
   ================================================================ */
.iwexplore-section {
  position: relative;
  overflow: hidden;
  padding: 88px 0 94px;
  background: linear-gradient(180deg, #f7fbff 0%, #fff 100%);
  font-family: Inter, "Segoe UI", system-ui, sans-serif
}

.iwexplore-section .container {
  position: relative
}

.iwexplore-head {
  max-width: 780px;
  margin: 0 auto 42px;
  text-align: center
}

.iwexplore-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  color: #168bd2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .19em
}

.iwexplore-eyebrow:before {
  content: "";
  width: 22px;
  height: 1px;
  background: #00b0f0
}

.iwexplore-head h2 {
  margin: 0 0 15px;
  color: #10234c;
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.04em
}

.iwexplore-head h2 span {
  color: #00aeea
}

.iwexplore-head p {
  max-width: 690px;
  margin: 0 auto;
  color: #65748b;
  font-size: 15px;
  line-height: 1.7
}

.iwexplore-list {
  max-width: 1000px;
  margin: 0 auto;
  border-top: 1px solid rgba(16, 35, 76, .12)
}

.iwexplore-row {
  position: relative;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 52px;
  align-items: center;
  min-height: 126px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(16, 35, 76, .12);
  color: #10234c !important;
  text-decoration: none !important;
  overflow: hidden;
  transition: background .3s ease, padding .3s ease
}

.iwexplore-row:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: #00b0f0;
  box-shadow: 0 0 12px rgba(0, 176, 240, .5);
  transition: width .45s cubic-bezier(.2, .7, .2, 1)
}

.iwexplore-row:hover {
  padding-left: 30px;
  background: linear-gradient(90deg, rgba(0, 176, 240, .055), rgba(0, 176, 240, 0) 72%);
  text-decoration: none !important
}

.iwexplore-row:hover:before {
  width: 100%
}

.iwexplore-no {
  color: #a9b9ca;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -.04em;
  transition: color .3s ease, text-shadow .3s ease
}

.iwexplore-row:hover .iwexplore-no {
  color: #00aeea;
  text-shadow: 0 0 20px rgba(0, 176, 240, .18)
}

.iwexplore-copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 30px
}

.iwexplore-copy strong {
  color: #10234c;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -.025em
}

.iwexplore-copy small {
  color: #6b7f93;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400
}

.iwexplore-arrow {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 176, 240, .18);
  border-radius: 50%;
  color: #00aeea;
  font-size: 20px;
  transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease
}

.iwexplore-row:hover .iwexplore-arrow {
  transform: translateX(6px);
  background: #00b0f0;
  border-color: #00b0f0;
  color: #fff
}

.iwexplore-social-note {
  max-width: 1000px;
  margin: 18px auto 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  color: #8a99aa;
  font-size: 12px
}

.iwexplore-social-note a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #168bd2 !important;
  font-weight: 700;
  text-decoration: none !important
}

.iwexplore-social-note a:hover {
  color: #00aeea !important;
  text-decoration: none !important
}

@media(max-width:767px) {
  .iwexplore-section {
    padding: 58px 0 64px
  }

  .iwexplore-head {
    margin-bottom: 28px;
    text-align: left
  }

  .iwexplore-eyebrow {
    font-size: 10px
  }

  .iwexplore-head h2 {
    font-size: 34px
  }

  .iwexplore-head p {
    font-size: 14px;
    line-height: 1.6
  }

  .iwexplore-row {
    grid-template-columns: 54px minmax(0, 1fr) 38px;
    min-height: 112px;
    padding: 0 4px
  }

  .iwexplore-row:hover {
    padding-left: 4px
  }

  .iwexplore-no {
    font-size: 25px
  }

  .iwexplore-copy {
    gap: 5px;
    padding-right: 12px
  }

  .iwexplore-copy strong {
    font-size: 18px
  }

  .iwexplore-copy small {
    font-size: 12.5px;
    line-height: 1.45
  }

  .iwexplore-arrow {
    width: 34px;
    height: 34px;
    font-size: 17px
  }

  .iwexplore-social-note {
    justify-content: flex-start;
    margin-top: 16px
  }
}

@media(prefers-reduced-motion:reduce) {

  .iwexplore-row,
  .iwexplore-row:before,
  .iwexplore-no,
  .iwexplore-arrow {
    transition: none !important
  }
}


/* ================================================================
   EXPLORE IWIFI PRO — PREMIUM / IMPACT VERSION
   ================================================================ */
.iwexplore-premium {
  isolation: isolate;
  padding: 110px 0 116px;
  background:
    radial-gradient(circle at 14% 16%, rgba(0, 176, 240, .10), transparent 28%),
    radial-gradient(circle at 88% 76%, rgba(0, 176, 240, .075), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 52%, #ffffff 100%);
}

.iwexplore-premium:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .38;
  pointer-events: none;
  background-image: linear-gradient(rgba(16, 35, 76, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 35, 76, .035) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 78%, transparent);
}

.iwexplore-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden
}

.iwexplore-ambient i {
  position: absolute;
  border: 1px solid rgba(0, 176, 240, .12);
  border-radius: 50%
}

.iwexplore-ambient i:nth-child(1) {
  width: 420px;
  height: 420px;
  right: -250px;
  top: 8%;
  animation: iwExploreFloat 10s ease-in-out infinite
}

.iwexplore-ambient i:nth-child(2) {
  width: 230px;
  height: 230px;
  left: -145px;
  bottom: 7%;
  animation: iwExploreFloat 8s ease-in-out -2s infinite
}

.iwexplore-ambient i:nth-child(3) {
  width: 8px;
  height: 8px;
  left: 15%;
  top: 27%;
  background: #00b0f0;
  border: 0;
  box-shadow: 0 0 0 7px rgba(0, 176, 240, .08), 0 0 26px rgba(0, 176, 240, .38);
  animation: iwExplorePulse 2.8s ease-in-out infinite
}

.iwexplore-premium .iwexplore-head {
  max-width: 840px;
  margin-bottom: 54px
}

.iwexplore-premium .iwexplore-eyebrow {
  padding: 7px 13px;
  border: 1px solid rgba(0, 176, 240, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 30px rgba(20, 65, 110, .06);
  backdrop-filter: blur(8px)
}

.iwexplore-premium .iwexplore-eyebrow:before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 176, 240, .55)
}

.iwexplore-premium .iwexplore-head h2 {
  font-size: clamp(40px, 4.8vw, 64px);
  letter-spacing: -.055em
}

.iwexplore-premium .iwexplore-head h2 span {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #009fe3, #31c8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.iwexplore-premium .iwexplore-head h2 span:after {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: -5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(0, 176, 240, .42), transparent);
  filter: blur(4px)
}

.iwexplore-premium .iwexplore-list {
  position: relative;
  max-width: 1080px;
  border: 1px solid rgba(16, 35, 76, .09);
  border-radius: 28px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 28px 80px rgba(24, 66, 110, .10);
  overflow: hidden;
  backdrop-filter: blur(18px)
}

.iwexplore-premium .iwexplore-list:before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 176, 240, .72), transparent);
  z-index: 3
}

.iwexplore-premium .iwexplore-row {
  grid-template-columns: 118px minmax(0, 1fr) 66px;
  min-height: 148px;
  padding: 0 34px;
  border-bottom: 1px solid rgba(16, 35, 76, .075);
  background: transparent;
  transform: translateZ(0)
}

.iwexplore-premium .iwexplore-row:last-child {
  border-bottom: 0
}

.iwexplore-premium .iwexplore-row:after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(100deg, rgba(0, 176, 240, .095), rgba(255, 255, 255, .1) 44%, rgba(0, 176, 240, .025));
  transform: translateX(-16%);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
  z-index: -1
}

.iwexplore-premium .iwexplore-row:before {
  height: 3px;
  bottom: 0;
  background: linear-gradient(90deg, #00aeea, #68d8ff, transparent);
  box-shadow: 0 0 22px rgba(0, 176, 240, .35)
}

.iwexplore-premium .iwexplore-row:hover {
  padding-left: 42px;
  background: transparent;
  box-shadow: inset 5px 0 0 #00b0f0
}

.iwexplore-premium .iwexplore-row:hover:after {
  opacity: 1;
  transform: translateX(0)
}

.iwexplore-premium .iwexplore-no {
  font-size: 48px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(16, 35, 76, .24);
  line-height: 1;
  transition: all .4s ease
}

.iwexplore-premium .iwexplore-row:hover .iwexplore-no {
  color: rgba(0, 176, 240, .07);
  -webkit-text-stroke: 1px #00aeea;
  transform: translateX(4px);
  text-shadow: 0 0 28px rgba(0, 176, 240, .16)
}

.iwexplore-premium .iwexplore-copy {
  gap: 9px
}

.iwexplore-premium .iwexplore-copy strong {
  font-size: 25px;
  font-weight: 800;
  transition: color .3s ease, transform .35s ease
}

.iwexplore-premium .iwexplore-copy small {
  max-width: 660px;
  font-size: 14.5px;
  color: #6a7c91
}

.iwexplore-premium .iwexplore-row:hover .iwexplore-copy strong {
  color: #008fce;
  transform: translateX(3px)
}

.iwexplore-premium .iwexplore-arrow {
  width: 50px;
  height: 50px;
  border-color: rgba(0, 176, 240, .22);
  background: #fff;
  box-shadow: 0 8px 24px rgba(28, 91, 138, .08)
}

.iwexplore-premium .iwexplore-row:hover .iwexplore-arrow {
  transform: translateX(7px) rotate(-8deg);
  box-shadow: 0 10px 30px rgba(0, 176, 240, .26)
}

.iwexplore-premium .iwexplore-social-note {
  max-width: 1080px;
  margin-top: 20px;
  padding-right: 8px
}

.iwexplore-cursor-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  right: -70px;
  top: -70px;
  background: radial-gradient(circle, rgba(0, 176, 240, .10), transparent 68%);
  filter: blur(2px);
  pointer-events: none
}

@keyframes iwExploreFloat {

  0%,
  100% {
    transform: translate3d(0, 0, 0)
  }

  50% {
    transform: translate3d(0, -18px, 0)
  }
}

@keyframes iwExplorePulse {

  0%,
  100% {
    opacity: .45;
    transform: scale(.85)
  }

  50% {
    opacity: 1;
    transform: scale(1.08)
  }
}

@media(max-width:767px) {
  .iwexplore-premium {
    padding: 70px 0 74px
  }

  .iwexplore-premium:before {
    background-size: 36px 36px
  }

  .iwexplore-premium .iwexplore-head {
    margin-bottom: 32px
  }

  .iwexplore-premium .iwexplore-head h2 {
    font-size: 38px
  }

  .iwexplore-premium .iwexplore-list {
    border-radius: 20px
  }

  .iwexplore-premium .iwexplore-row {
    grid-template-columns: 54px minmax(0, 1fr) 40px;
    min-height: 124px;
    padding: 0 16px
  }

  .iwexplore-premium .iwexplore-row:hover {
    padding-left: 16px;
    box-shadow: inset 3px 0 0 #00b0f0
  }

  .iwexplore-premium .iwexplore-no {
    font-size: 27px
  }

  .iwexplore-premium .iwexplore-copy strong {
    font-size: 19px
  }

  .iwexplore-premium .iwexplore-copy small {
    font-size: 12.5px
  }

  .iwexplore-premium .iwexplore-arrow {
    width: 36px;
    height: 36px
  }

  .iwexplore-ambient i:nth-child(1) {
    width: 250px;
    height: 250px;
    right: -190px
  }
}

@media(prefers-reduced-motion:reduce) {
  .iwexplore-ambient i {
    animation: none !important
  }
}

/* ================================================================
   EXPLORE IWIFI PRO — DESKTOP: 3 ITEMS ON ONE ROW
   ================================================================ */
@media (min-width: 992px) {
  .iwexplore-premium .iwexplore-list {
    max-width: 1320px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .iwexplore-premium .iwexplore-row {
    grid-template-columns: 72px minmax(0, 1fr) 52px;
    min-height: 210px;
    padding: 30px 24px;
    border-bottom: 0;
    border-right: 1px solid rgba(16, 35, 76, .075);
  }

  .iwexplore-premium .iwexplore-row:last-child {
    border-right: 0;
  }

  .iwexplore-premium .iwexplore-row:hover {
    padding-left: 28px;
    box-shadow: inset 0 4px 0 #00b0f0;
  }

  .iwexplore-premium .iwexplore-row:before {
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    width: 0;
    height: 3px;
  }

  .iwexplore-premium .iwexplore-row:hover:before {
    width: 100%;
  }

  .iwexplore-premium .iwexplore-no {
    align-self: start;
    padding-top: 4px;
    font-size: 42px;
  }

  .iwexplore-premium .iwexplore-copy {
    align-self: center;
    gap: 10px;
    padding-right: 12px;
  }

  .iwexplore-premium .iwexplore-copy strong {
    font-size: 24px;
  }

  .iwexplore-premium .iwexplore-copy small {
    font-size: 13.5px;
    line-height: 1.55;
  }

  .iwexplore-premium .iwexplore-arrow {
    align-self: center;
    width: 46px;
    height: 46px;
  }

  .iwexplore-premium .iwexplore-social-note {
    max-width: 1320px;
  }
}


/* ================================================================
   EXPLORE IWIFI PRO — INLINE VIEW CTA (no top/right circle arrow)
   ================================================================ */
.iwexplore-premium .iwexplore-view {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  margin-top: 8px;
  color: #00aeea;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  transition: color .3s ease, transform .3s ease;
}

.iwexplore-premium .iwexplore-view i {
  display: inline-block;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  transition: transform .3s ease;
}

.iwexplore-premium .iwexplore-row:hover .iwexplore-view {
  color: #008fce;
  transform: translateX(2px);
}

.iwexplore-premium .iwexplore-row:hover .iwexplore-view i {
  transform: translateX(5px);
}

@media (min-width: 992px) {
  .iwexplore-premium .iwexplore-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .iwexplore-premium .iwexplore-copy {
    padding-right: 4px;
  }
}

@media (max-width: 991px) {
  .iwexplore-premium .iwexplore-row {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .iwexplore-premium .iwexplore-view {
    margin-top: 5px;
    font-size: 12px;
  }
}

/* Remove redundant blue ambient dot on the left of Explore section */
#explore-iwifi .iwexplore-ambient i:first-child {
  display: none !important;
}

/* Remove the small glowing blue dot on the left (3rd ambient element) */
#explore-iwifi .iwexplore-ambient i:nth-child(3) {
  display: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* Explore eyebrow: text only, aligned with other section eyebrows */
#explore-iwifi .iwexplore-eyebrow {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #168bd2;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#explore-iwifi .iwexplore-eyebrow::before,
#explore-iwifi .iwexplore-eyebrow:before {
  display: none !important;
  content: none !important;
}


/* ================================================================
   CASE STUDIES — heading aligned with premium section system
   ================================================================ */
#case_study_wifi.case-study-section {
  padding: 72px 0 34px;
  background: #fff;
  min-height: 0 !important;
}

#case_study_wifi .case-study-head {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}

#case_study_wifi .case-study-eyebrow {
  margin-bottom: 13px;
  color: #00aeea;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .22em;
}

#case_study_wifi .case-study-head h2 {
  margin: 0 0 14px;
  color: #10234c;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.055em;
  text-transform: none;
}

#case_study_wifi .case-study-head h2 span {
  background: linear-gradient(90deg, #009fe3, #31c8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#case_study_wifi .case-study-head p {
  max-width: 690px;
  margin: 0 auto;
  color: #65748b;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 767.98px) {
  #case_study_wifi.case-study-section {
    padding: 56px 0 24px;
  }

  #case_study_wifi .case-study-head {
    padding: 0 4px;
    text-align: left;
  }

  #case_study_wifi .case-study-eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: .18em;
  }

  #case_study_wifi .case-study-head h2 {
    margin-bottom: 10px;
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -.045em;
  }

  #case_study_wifi .case-study-head p {
    max-width: 335px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
  }
}

/* ================================================================
   CASE STUDIES — MOBILE: show exactly 1 slide at a time
   ================================================================ */
@media (max-width: 767px) {
  #inventory {
    width: 100%;
    overflow: hidden;
  }

  #inventory .inventory_wrapper,
  #inventory .inventory_zone {
    width: 100%;
    overflow: hidden;
  }

  #inventory .inventory_list.swiper-wrapper {
    width: 100%;
  }

  #inventory .inventory_item.swiper-slide {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  #inventory .inventory_zone .inventory_item .inventory_item_image {
    width: 100%;
    height: calc(100vh - 187px);
  }

  #inventory .inventory_zone .inventory_item .inventory_item_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}


/* ================================================================
   CASE STUDIES — FINAL MOBILE FIX
   Native 1-card horizontal slider; overrides Swiper desktop sizing.
   ================================================================ */
@media (max-width: 767px) {

  #inventory,
  #inventory .inventory_wrapper.case-study-mobile-slider {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #inventory .inventory_wrapper.case-study-mobile-slider .inventory_list.case-study-mobile-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #inventory .inventory_wrapper.case-study-mobile-slider .inventory_list.case-study-mobile-track::-webkit-scrollbar {
    display: none;
  }

  #inventory .inventory_wrapper.case-study-mobile-slider .inventory_item.swiper-slide {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  #inventory .inventory_wrapper.case-study-mobile-slider .inventory_item_image {
    width: 100% !important;
    height: calc(100vh - 187px) !important;
    overflow: hidden;
  }

  #inventory .inventory_wrapper.case-study-mobile-slider .inventory_item_image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  #inventory .inventory_wrapper.case-study-mobile-slider .inventory_item_meta {
    width: 100% !important;
    left: 0 !important;
    box-sizing: border-box;
  }
}

/* MOBILE FIX — SERVICE AND SOLUTION: show full slide image without crop */
@media (max-width: 767px) {

  #slider2,
  #slider2 .swiper-container,
  #slider2 .swiper-wrapper,
  #slider2 .swiper-slide {
    height: auto !important;
    min-height: 0 !important;
  }

  #slider2 .swiper-slide {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #000;
  }
}


/* SERVICE & SOLUTION — MOBILE FIX V2: full image, no crop, no black bars */
@media (max-width: 767px) {
  #slider2 {
    min-height: 1px !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  #slider2 .swiper-container,
  #slider2 .swiper-wrapper {
    min-height: 1px !important;
    background: transparent !important;
  }

  #slider2 .swiper-slide {
    width: 100% !important;
    min-height: 1px !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
  }
}


/* =========================================================
   MIA ECOSYSTEM — CONTACT FOOTER DEMO
   ========================================================= */
#footer .mia-ecosystem {
  margin: 58px 0 8px;
  padding: 42px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, .12)
}

#footer .mia-ecosystem-heading {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center
}

#footer .mia-ecosystem-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: #00b0f0;
  font: 700 14px/1.4 'Poppins', sans-serif;
  letter-spacing: 3.5px
}

#footer .mia-ecosystem-heading h3 {
  margin: 0 0 12px;
  color: #fff;
  font: 700 clamp(25px, 3vw, 36px)/1.2 'Poppins', sans-serif;
  letter-spacing: -.8px
}

#footer .mia-ecosystem-heading h3 span {
  color: #00b0f0
}

#footer .mia-ecosystem-heading p {
  max-width: 650px;
  margin: 0 auto;
  color: #aab5c2;
  font: 400 14px/1.8 'quicksand', sans-serif
}

#footer .mia-ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px
}

#footer .mia-ecosystem-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 25px 25px 23px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  overflow: hidden
}

#footer .mia-ecosystem-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 25px;
  right: 25px;
  height: 2px;
  background: #00b0f0;
  opacity: .9
}

#footer .mia-ecosystem-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 176, 240, .55);
  background: linear-gradient(145deg, rgba(0, 176, 240, .12), rgba(255, 255, 255, .035))
}

#footer .mia-ecosystem-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 23px
}

#footer .mia-ecosystem-index {
  color: #7f8d9e;
  font: 600 12px/1 'Poppins', sans-serif;
  letter-spacing: 1px
}

#footer .mia-ecosystem-symbol {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 176, 240, .45);
  border-radius: 12px;
  background: rgba(0, 176, 240, .1);
  color: #45c8f5;
  font: 400 24px/1 sans-serif
}

#footer .mia-ecosystem-type {
  margin-bottom: 7px;
  color: #00b0f0;
  font: 700 10px/1.5 'Poppins', sans-serif;
  letter-spacing: 2px
}

#footer .mia-ecosystem-card h4 {
  margin: 0 0 11px;
  color: #fff;
  font: 700 25px/1.2 'Poppins', sans-serif
}

#footer .mia-ecosystem-card p {
  margin: 0 0 22px;
  color: #b1bbc7;
  font: 400 13px/1.75 'quicksand', sans-serif;
  flex: 1
}

#footer .mia-ecosystem-card a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font: 600 12px/1.4 'Poppins', sans-serif;
  text-decoration: none !important
}

#footer .mia-ecosystem-card a span {
  color: #00b0f0;
  font-size: 19px;
  transition: transform .2s ease
}

#footer .mia-ecosystem-card a:hover {
  color: #55d0ff
}

#footer .mia-ecosystem-card a:hover span {
  transform: translate(3px, -2px)
}

@media(max-width:767.98px) {
  #footer .mia-ecosystem {
    margin-top: 38px;
    padding-top: 34px
  }

  #footer .mia-ecosystem-heading {
    text-align: left;
    margin: 0 0 22px
  }

  #footer .mia-ecosystem-heading h3 {
    font-size: 27px;
    line-height: 1.2
  }

  #footer .mia-ecosystem-heading p {
    font-size: 13px;
    line-height: 1.7
  }

  #footer .mia-ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 13px
  }

  #footer .mia-ecosystem-card {
    min-height: 0;
    padding: 22px 21px 19px;
    border-radius: 14px
  }

  #footer .mia-ecosystem-top {
    margin-bottom: 17px
  }

  #footer .mia-ecosystem-card p {
    margin-bottom: 18px
  }
}


/* =========================================================
   MIA ECOSYSTEM — SPACING & MOBILE REFINEMENT
   ========================================================= */
#footer .mia-ecosystem {
  margin: 40px 0 20px 0;
  padding: 30px 0 4px;
}

#footer .mia-ecosystem-heading {
  margin-bottom: 24px
}

#footer .mia-ecosystem-heading p {
  line-height: 1.7
}

#footer .mia-ecosystem-grid {
  gap: 16px
}

#footer .mia-ecosystem-card {
  min-height: 260px;
  padding: 23px 22px 20px
}

#footer .mia-ecosystem-top {
  margin-bottom: 19px
}

@media (max-width:767.98px) {
  #footer .mia-ecosystem {
    margin: 24px 0 0;
    padding: 24px 0 0;
  }

  #footer .mia-ecosystem-heading {
    margin: 0 0 18px;
    text-align: left;
  }

  #footer .mia-ecosystem-eyebrow {
    margin-bottom: 8px;
    font-size: 9px;
    letter-spacing: 2.6px;
  }

  #footer .mia-ecosystem-heading h3 {
    max-width: 460px;
    margin: 0 0 9px;
    font-size: clamp(23px, 6.2vw, 28px);
    line-height: 1.18;
    letter-spacing: -.55px;
  }

  #footer .mia-ecosystem-heading p {
    max-width: 520px;
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
  }

  #footer .mia-ecosystem-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }

  #footer .mia-ecosystem-card {
    min-height: 0;
    padding: 17px 17px 15px;
    border-radius: 13px;
  }

  #footer .mia-ecosystem-card:before {
    left: 17px;
    right: 17px
  }

  #footer .mia-ecosystem-top {
    margin-bottom: 12px
  }

  #footer .mia-ecosystem-symbol {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 21px
  }

  #footer .mia-ecosystem-type {
    margin-bottom: 5px;
    font-size: 9px;
    letter-spacing: 1.7px
  }

  #footer .mia-ecosystem-card h4 {
    margin: 0 0 7px;
    font-size: 22px;
    line-height: 1.2
  }

  #footer .mia-ecosystem-card p {
    margin: 0 0 13px;
    font-size: 12px;
    line-height: 1.6
  }

  #footer .mia-ecosystem-card a {
    padding-top: 10px;
    font-size: 11px
  }

  #footer .mia-ecosystem-card a span {
    font-size: 18px
  }
}

@media (max-width:380px) {
  #footer .mia-ecosystem {
    padding-top: 20px
  }

  #footer .mia-ecosystem-heading h3 {
    font-size: 23px
  }

  #footer .mia-ecosystem-card {
    padding: 16px 14px 14px
  }

  #footer .mia-ecosystem-card:before {
    left: 14px;
    right: 14px
  }
}


/* =========================================================
   MIA ECOSYSTEM CONTACT FORM — below the three solution cards
   ========================================================= */
#footer .mia-contact-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 58px);
  margin: 30px 0 18px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(0, 176, 240, .22);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(0, 176, 240, .13), transparent 52%),
    linear-gradient(135deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018));
  overflow: hidden;
}

#footer .mia-contact-intro {
  align-self: center
}

#footer .mia-contact-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: #00b0f0;
  font: 700 11px/1.4 'Poppins', sans-serif;
  letter-spacing: 2.5px
}

#footer .mia-contact-intro h4 {
  margin: 0 0 13px;
  color: #fff;
  font: 700 clamp(24px, 2.5vw, 34px)/1.2 'Poppins', sans-serif;
  letter-spacing: -.7px
}

#footer .mia-contact-intro h4 span {
  color: #00b0f0
}

#footer .mia-contact-intro>p {
  margin: 0;
  color: #aab5c2;
  font: 400 14px/1.8 'quicksand', sans-serif
}

#footer .mia-contact-note {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 26px;
  color: #aab5c2;
  font: 400 12px/1.7 'quicksand', sans-serif
}

#footer .mia-contact-note strong {
  color: #fff;
  font-weight: 600
}

#footer .mia-contact-note-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(0, 176, 240, .35);
  border-radius: 13px;
  background: rgba(0, 176, 240, .1);
  color: #39c9f7;
  font-size: 20px
}

#footer .mia-contact-form {
  min-width: 0
}

#footer .mia-contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px
}

#footer .mia-contact-form label {
  display: block;
  margin: 0;
  color: #dfe8f0;
  font: 600 11px/1.5 'Poppins', sans-serif;
  letter-spacing: .2px
}

#footer .mia-contact-form input,
#footer .mia-contact-form select,
#footer .mia-contact-form textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 7px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
  outline: none;
  background: rgba(5, 17, 31, .62);
  color: #fff;
  font: 400 12px/1.5 'quicksand', sans-serif;
  box-shadow: none;
  transition: border-color .2s, background .2s
}

#footer .mia-contact-form input::placeholder,
#footer .mia-contact-form textarea::placeholder {
  color: #778697
}

#footer .mia-contact-form select {
  color: #b8c4d1
}

#footer .mia-contact-form select option {
  background: #102133;
  color: #fff
}

#footer .mia-contact-form input:focus,
#footer .mia-contact-form select:focus,
#footer .mia-contact-form textarea:focus {
  border-color: #00b0f0;
  background: rgba(5, 17, 31, .9)
}

#footer .mia-contact-form textarea {
  resize: vertical;
  min-height: 88px
}

#footer .mia-contact-message {
  grid-column: 1/-1
}

#footer .mia-contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin-top: 17px;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(100deg, #00a9e8, #16c3f3);
  color: #032034;
  font: 700 12px/1.4 'Poppins', sans-serif;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s
}

#footer .mia-contact-submit span {
  font-size: 19px;
  line-height: 10px;
  transition: transform .2s
}

#footer .mia-contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 24px rgba(0, 176, 240, .2)
}

#footer .mia-contact-submit:hover span {
  transform: translateX(4px)
}

#footer .mia-contact-privacy {
  margin: 11px 0 0;
  color: #778697;
  font: 400 10px/1.6 'quicksand', sans-serif;
  text-align: center
}

@media(max-width:767.98px) {
  #footer .mia-contact-panel {
    grid-template-columns: 1fr;
    gap: 23px;
    margin: 22px 0 12px;
    padding: 22px 17px;
    border-radius: 16px
  }

  #footer .mia-contact-intro h4 {
    font-size: 25px;
    max-width: 360px
  }

  #footer .mia-contact-intro>p {
    font-size: 12px
  }

  #footer .mia-contact-note {
    display: none
  }

  #footer .mia-contact-fields {
    grid-template-columns: 1fr;
    gap: 13px
  }

  #footer .mia-contact-message {
    grid-column: auto
  }

  #footer .mia-contact-form input,
  #footer .mia-contact-form select {
    min-height: 44px
  }

  #footer .mia-contact-submit {
    margin-top: 15px
  }
}


/* =========================================================
   CONTACT FORM — layout fix and visual polish (v2)
   Explicit grid placement prevents a missing / collapsed field.
   ========================================================= */
#footer section.mia-contact-panel {
  box-sizing: border-box !important;
  align-items: stretch !important;
}

#footer section.mia-contact-panel,
#footer section.mia-contact-panel * {
  box-sizing: border-box;
}

#footer .mia-contact-form {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

#footer .mia-contact-fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  gap: 18px 16px !important;
  width: 100% !important;
}

#footer .mia-contact-form label.mia-contact-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  color: #e6edf5 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: .15px !important;
}

#footer .mia-contact-field-name {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#footer .mia-contact-field-phone {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#footer .mia-contact-field-email {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

#footer .mia-contact-form label.mia-contact-message {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

#footer .mia-contact-form input,
#footer .mia-contact-form textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 8px 0 0 !important;
  padding: 13px 15px !important;
  border: 1px solid rgba(155, 190, 215, .24) !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-family: 'quicksand', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .12) !important;
}

#footer .mia-contact-form input {
  height: 49px !important;
  min-height: 49px !important;
}

#footer .mia-contact-form textarea {
  min-height: 112px !important;
  resize: vertical !important;
}

#footer .mia-contact-form input::placeholder,
#footer .mia-contact-form textarea::placeholder {
  color: #8495a7 !important;
  opacity: 1 !important;
}

#footer .mia-contact-form input:focus,
#footer .mia-contact-form textarea:focus {
  border-color: #00b0f0 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(0, 176, 240, .12) !important;
}

#footer .mia-contact-submit {
  min-height: 49px !important;
  margin-top: 19px !important;
  border-radius: 11px !important;
}

#footer .mia-contact-privacy {
  line-height: 1.65 !important;
}

@media(max-width:767.98px) {
  #footer .mia-contact-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 22px 18px !important;
  }

  #footer .mia-contact-fields {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 15px !important;
  }

  #footer .mia-contact-field-name,
  #footer .mia-contact-field-phone,
  #footer .mia-contact-field-email,
  #footer .mia-contact-form label.mia-contact-message {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  #footer .mia-contact-form input {
    height: 47px !important;
    min-height: 47px !important;
  }

  #footer .mia-contact-form textarea {
    min-height: 105px !important;
  }
}

.mia-contact-field-error {
  display: block;
  min-height: 0;
  margin-top: 5px;
  color: #d93025;
  font-size: 12px;
  line-height: 1.4;
}

.mia-contact-field-error:empty {
  display: none;
}

.mia-contact-form-status {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
}

.mia-contact-form-status:empty {
  display: none;
}

.mia-contact-form-status.is-success {
  color: #FFEB3B;
}

.mia-contact-form-status.is-error {
  color: #d93025;
}

.mia-contact-form-status.is-pending {
  color: #555;
}

.mia-contact-form input[aria-invalid="true"] {
  border-color: #d93025 !important;
}

.mia-contact-field-error,
.mia-contact-form-status {
  text-transform: none !important;
}