@font-face {
    font-family: 'SKFDisplayLight';
    font-display: swap; /* improves perceived performance */
    src: url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplayLight.eot');
    src: url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplayLight.eot') format('embedded-opentype'),
         url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplayLight.woff2') format('woff2'),
         url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplayLight.woff') format('woff'),
         url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplayLight.ttf') format('truetype'),
         url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplayLight.svg#SKFDisplayLight') format('svg');
}


@font-face {
    font-family: 'SKFSansRegular';
    font-display: swap; /* improves perceived performance */
    src: url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFSansRegular.eot');
    src: url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFSansRegular.eot') format('embedded-opentype'),
         url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFSansRegular.woff2') format('woff2'),
         url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFSansRegular.woff') format('woff'),
         url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFSansRegular.ttf') format('truetype'),
         url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFSansRegular.svg#SKFSansRegular') format('svg');
}




@font-face {
    font-family: 'SKF Display';
    src: url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplay-Bold.eot');
    src: url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplay-Bold.woff2') format('woff2'),
        url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplay-Bold.woff') format('woff'),
        url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplay-Bold.ttf') format('truetype'),
        url('https://plugincomm.com/skf/why-campaign-LP/css/fonts/SKFDisplay-Bold.svg#SKFDisplay-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



body {
	margin: 0;
    font-family: 'SKFSans-Light'; 
    font-family: 'SKFDisplayLight';
    font-family: 'SKFSansRegular';
    
}

a{transition: transform .2s; /* Animation */}
a:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.modal-link{transition: transform .2s; /* Animation */}
.section-2 .modal-link:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


.container {    
    margin: auto;
	width: 100%;
    max-width: 90%;
}

.anc a {
    display: inline-block;
    background: #fff;
    text-decoration: none;
    color: #02115c;
    /*text-transform: uppercase;*/
    padding: 15px 30px;
    margin-top: 20px;
}
img {
    width: 100%;
}
.bgimage img {
    width: 100%;
	float: left;
}

section.section-1 {
    display: inline-block;
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    background: #02115c;
    padding-top: 100px;
    padding-bottom: 100px
}

section.section-1 .container-inner {
    display: flex;
    position: relative;
    top: auto;
    justify-content: space-between;
    width: 100%;
    left: auto;
    right: auto;
    align-items: center;
    color: #fff;
}

section.section-1 .container {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

section.section-1 h1 {
    font-size: 85px;
    font-family: 'SKF Display';
    font-weight: normal;
    margin: 0;
}

section.section-2 {
    display: inline-block;
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

section.section-2 .container-inner {
    display: flex;
    position: relative;
    top: auto;
    justify-content: space-between;
    width: 100%;
    left: auto;
    right: auto;
    align-items: center;
    color: #fff;
}

section.section-2 .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.top-head h2 {
    background: #fff;
    padding: 10px 60px;
    position: relative;
    top: -80px;
    color: #01115b;
    font-size: 45px;
	font-family:SKFDisplayLight;
}

section.section-2 h1 {
    font-size: 70px;
    font-family: SKFDisplayLight;
    font-weight: normal;
    margin: 0;
}

section.section-2 .rw {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
	justify-content: center;
}

section.section-2 .rw .bx {
    width: 175px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    color: #0000fe;
    font-size: 16px;
    padding: 10px 10px;
	position: relative;
	margin: 22px 0;
}
section.section-2 .rw .bx:before {
    content: "";
    border-bottom: solid 45px #fff;
    border-left: solid 95px transparent;
    border-right: solid 100px transparent;
    top: 0;
    position: absolute;
    top: -44px;
    left: 0;
    right: 0;
}

section.section-2 .rw .bx:after {
    content: "";
	border-top: solid 45px #fff;
    border-left: solid 95px transparent;
	border-right: solid 100px transparent;
    top: auto;
    position: absolute;
    bottom: -44px;
    left: 0;
    right: 0;
}
section.section-2 .container-inner .col-left {
    width: 50%;
}

section.section-2 .rw .bx .icon img {
    max-width: 40px;
}

section.section-2 .rw .bx p {
    margin: 0;
    padding: 0 10px;
    color:#000;
}

section.section-2 .rw.rw2 .bx {    
    
}

section.section-2 .rw.rw2 {}

section.section-2 .rw.rw2 .bx:before {
}

section.section-2 .rw .bx .icon {
    /* position: relative; */
}

section.section-2 .rw .bx .bulet {
    content: "";
    padding: 0;
    display: block;
    background: transparent;
    right: -20px;
    position: absolute;
    top: 35%;
    border-radius: 50px;
    border: 0px solid #62585b;
    z-index: 999;
    border-bottom-right-radius: 80px;
    border-top-right-radius: 90px;
}

section.section-2 .rw.rw2 .bx .bulet {
    transform: rotate(180deg);
	right: auto;
        left: -20px;
}

section.section-2 .rw .bx .bulet img {
    max-width: 20px;
}

section.section-2 .rw .bx .info {
    position: relative;
    z-index: 99;
}

section.section-2 .rw.rw1 {}

section.section-2 .rw.rw1 .bx3 .bulet {
    transform: rotate(66deg);
    right: 33px;
    bottom: -50px;
    left: auto;
    width: 20px;
    height: 40px;
    top: auto;
}

section.section-2 .rw.rw2 .bx1 .bulet {
    transform: rotate(66deg);
    right: 33px;
    bottom: -50px;
    left: auto;
    width: 20px;
    height: 40px;
    top: auto;
}

section.section-2 .rw.rw3 .bx3 .bulet {
    display: none;
}

section.section-3 {
    position: relative;
    display: inline-block;
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

section.section-3 .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
    max-width: 100%;
}

section.section-3 .container-inner {
    display: flex;
    position: relative;
    top: auto;
    justify-content: space-between;
    width: 100%;
    left: auto;
    right: auto;
    align-items: center;
    color: #fff;
    height: 100%;
    padding-left: 100px;
}

section.section-3 .container-inner .col-left {
    width: 100%;
    position: relative;
    height: 100%;
    max-height: 500px;
    display: flex;
    align-items: center;
    justify-content: start;
    max-width: 710px;
}

section.section-3 .col-left .rw .bx {
    position: absolute;
    color: #fff;
    transition: .3s ease;
}

section.section-3 .col-left .rw .bx .j-icon img {
    width: auto;
}

section.section-3 .col-left .rw .bx.bx1 {
    top: 52px;
    text-align: left;
    
}
section.section-3 .col-left .rw .bx.bx:hover {
    scale: 1.03;
}
section.section-3 .col-left .rw .bx p.title {
    position: absolute;
}

section.section-3 .col-left .rw .bx.bx1 p.title {
    top: -50px;
    left: 10px;
}

section.section-3 .col-left .rw .bx.bx p.title {
    font-size: 20px;
}

section.section-3 .col-left .rw .bx .j-icon img {
    max-width: 220px;
}

section.section-3 .col-left .rw .bx.bx2 {
    top: 55px;
    left: 215px;
}

section.section-3 .col-left .rw .bx.bx2 p.title {
    top: -55px;
    right: 40px;
}

section.section-3 .col-left .rw .bx2 .j-icon img {
    max-width: 240px;
}

section.section-3 .col-left .rw .bx.bx3 {
    right: 70px;
    top: 100px;
}

section.section-3 .col-left .rw .bx3 .j-icon img {
    max-width: 100px;
}

section.section-3 .col-left .rw .bx.bx3 p.title {
    top: 21px;
    right: -67px;
}

section.section-3 .col-left .rw .bx.bx4 {
    right: 32px;
    top: 210px;
}

section.section-3 .col-left .rw .bx4 .j-icon img {
    max-width: 70px;
}

section.section-3 .col-left .rw .bx.bx4 p.title {
    top: auto;
    right: -83px;
    bottom: 58px;
}

section.section-3 .col-left .rw .bx.bx5 {
    right: 83px;
    top: 393px;
}

section.section-3 .col-left .rw .bx5 .j-icon img {
    max-width: 200px;
}

section.section-3 .col-left .rw .bx.bx5 p.title {
    top: auto;
    right: 0;
    bottom: -44px;
    left: auto;
}

section.section-3 .col-left .rw .bx.bx6 {
    right: 281px;
    top: 393px;
}

section.section-3 .col-left .rw .bx6 .j-icon img {
    max-width: 180px;
}

section.section-3 .col-left .rw .bx.bx6 p.title {
    top: auto;
    right: auto;
    bottom: -44px;
    left: 0;
}

section.section-3 .col-left .rw .bx.bx7 {
    right: 445px;
    top: 203px;
}

section.section-3 .col-left .rw .bx7 .j-icon img {
    max-width: 70px;
}

section.section-3 .col-left .rw .bx.bx7 p.title {
    top: 60px;
    right: 73px;
    bottom: 0;
    left: auto;
    text-align: center;
}


/*
section.section-3 .col-left .rw .bx.bx1.upt01 {
    top: 67px;
}

section.section-3 {}

section.section-3 .bgimage {
    background: #fff;
}

section.section-3 .bgimage img {
    visibility: hidden;
    opacity: 0;
}

section.section-3 .col-left .bx.bx2.upt01 {
    top: 69px;
    left: 211px;
}

section.section-3 .col-left .bx.bx2.upt01 .j-icon img {
    max-width: 168px;
}

section.section-3 .col-left .bx.bx3.upt03 {
    right: 0;
    left: 0;
}

section.section-3 .col-left .bx.bx3.upt01 {
    right: 132px;
    top: 121px;
}

section.section-3 .col-left .bx.bx3.upt01 img {
    max-width: 110px;
}*/


section.section-3 .container-inner .col-right {
    height: 100%;
    background: #fff;
    width: 50%;
    padding: 0 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: start;
}

section.section-3 .container-inner .col-right h2 {
    color: #0000fe;
    font-family: 'SKF Display';
    font-weight: normal;
    margin: 0;
    font-size: 80px;
}

section.section-3 .container-inner .col-right .anc a {
    background: #0000fe;
    color: #fff;
    border-radius: 3px;
    padding: 15px 50px;
    margin-top: 40px;
    display: inline-block;
    font-weight: bold;
}

section.section-3 .container-inner .center-div {
    position: absolute;
    top: 150px;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    max-width: 150px;
    left: auto;
    right: 178px;
    height: 300px;
    width: 100%;
}

section.section-3 .container-inner .center-div .info.center-elm {
    position: absolute;
    left: 0;
    right: 0;
}

section.section-3 .container-inner .center-div .j-icon {}

section.section-3 .container-inner .center-div .j-icon img {
    max-width: none;
}

section.section-3 .container-inner .center-div .j-w-icon img {
    width: auto;
    max-width: 33px;
    margin: auto;
}

section.section-3 .container-inner .center-div .info.upt01 p.title {
    color: #333;
}

section.section-3 .container-inner .center-div .info.upt01 .j-w-icon img {
    filter: invert(100%);
}

section.section-3 .container-inner .center-div .j-w-icon {
    text-align: center;
}

section.section-3 .container-inner .center-div p.title {
    margin: 0;
}

.info.center-elm {
    position: relative;
    top: auto;
    left: 0;
    right: auto;
    bottom: auto;
}

section.section-3 .container-inner .center-div .info {
    position: absolute;
}

section.section-3 .container-inner .center-div .info1 {
    left: -75px;
}

section.section-3 .container-inner .center-div .info3 {
    right: -90px;
}

section.section-3 .container-inner .center-div .info2 {
    top: 0px;
    left: 40px;
}


section.section-4 { background:#02115c;
    position: relative;
    display: inline-block;
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
	padding:50px 0;
}

section.section-4 .container {
    position: relative;
    margin:0 auto;
    align-items: center;
    width: 600px;
}
section.section-4 h3{text-align:center; font-family:SKFDisplayLight; font-size:32px; color:#fff;}
section.section-4 input{width: 96%; padding:15px 10px; margin-bottom:10px;border:1px solid #0000fe;}
section.section-4 select{width: 100%; padding:15px 10px; margin-bottom:10px;border:1px solid #0000fe;}
section.section-4 textarea{width: 97%; padding:15px 10px; margin-bottom:10px;border:1px solid #0000fe;}
section.section-4 button{width: 100%; padding:11px; margin-bottom:10px; background:#0000fe; border:1px solid #fff; color:#fff; font-size:22px;}



.custom-modal {
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgb(0 0 0 / 60%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 30px;
  z-index: 9999;
}
.custom-modal-dialog {
  max-width: 1000px;
  width: 100%;
  border-radius: 0px;
  position: relative;
}
.custom-modal-content {
  background: #ffffff;
  padding: 30px 30px;
  border-radius: 10px;
}
.close-modal {
  cursor :pointer;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  background: #000000;
  opacity: 1;
  color: #ffffff;
  border-radius: 100%;
  border: 2px solid #ffffff;
  z-index: 9;
  box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 8%);
  padding: 0;
  text-align: center;
  line-height: 30px;  
}
.custom-modal {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}
.modal-open {
  opacity: 1;
  visibility: visible;

}
.custom-modal-dialog {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);

}
.modal-open .custom-modal-dialog {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);

  
}

.modal-open .custom-modal-dialog,
 .custom-modal-dialog {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.modal-link {
	cursor: pointer;
	position: relative;
    z-index: 9;
}

.custom-modal-inner {
    display: flex;
}

.custom-modal-inner .left {
    width: 40%;
}

.custom-modal-inner .right {
    width: 60%;
    padding: 0 0 0 20px;
    text-align: left;
}

.custom-modal-inner .right p {
    margin: 0;
    font-size: 16px;
    margin-bottom: 10px;
}

.custom-modal-inner .right li{font-size: 15px;}


.custom-modal-inner .right .anc {
    padding-top: 15px;
}

.custom-modal-inner .right .anc a.btn {
    background: #0000fe;
    color: #fff;
    display: inline-block;
    padding: 8px 15px;
    text-decoration: none;
    text-transform: none;
    border-radius: 5px;
    margin-right: 10px;
    height: auto;
    margin: 0 10px 0 0px;
}

.custom-modal-inner .right .anc button.btn {
    background: #0000fe;
    color: #fff;
    display: inline-block;
    padding: 8px 15px;
    text-decoration: none;
    text-transform: none;
    border-radius: 5px;
    margin-right: 10px;
    border: 0;
    font: 400 18px SKFSansRegular;
}

.custom-modal-inner.popup1 {
    flex-direction: column;
    align-items: end;
}

.custom-modal-inner.popup1 .anc {
    text-align: right;
}

.custom-modal-inner.popup1 .anc a.btn, .custom-modal-inner.popup1 .anc button.btn {
    background: #f86516;
}

@media screen and (min-width: 1520px) { 
	section.section-2 .rw.rw2 .bx {
    min-width: 175px;
}
}

@media screen and (max-width: 1680px) {
section.section-1 h1 {
    font-size: 65px;
}
}
@media screen and (max-width: 1520px) {
    section.section-3 .container-inner .col-left {
    top: -30px;
}
	section.section-1 h1 {
    font-size: 51px;
}

section.section-1 .container-inner .col-left, 
section.section-1 .container-inner .col-right {
    width: 50%;
}

section.section-1 .container-inner .col-right {text-align:right; }


	section.section-2 .rw {
		gap: 5px;
		margin-bottom: 5px;
	}
	section.section-2 .rw .bx {
    width: 145px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    color: #0000fe;
    font-size: 16px;
    padding: 0px 10px;
    position: relative;
    margin: 23px 0;
}
section.section-2 .rw .bx:before {
    content: "";
    border-bottom: solid 45px #fff;
    border-left: solid 85px transparent;
    border-right: solid 80px transparent;
    top: 0;
    position: absolute;
    top: -44px;
    left: 0;
    right: 0;
}
section.section-2 .rw .bx:after {
    content: "";
    border-top: solid 45px #fff;
    border-left: solid 85px transparent;
    border-right: solid 80px transparent;
    top: auto;
    position: absolute;
    bottom: -44px;
    left: 0;
    right: 0;
}
section.section-2 .rw .bx p {
    font-size: 14px;
	padding: 0;
	margin: 0;
}
section.section-2 .rw.rw2 .bx {
    width: 100%;
    min-width: 145px;
    left: 0px;
}

section.section-2 .rw.rw2 .bx .bulet {
    transform: rotate(180deg);
    right: -5px;
}

section.section-2 .rw.rw1 .bx3 .bulet {
    transform: rotate(60deg);
    right: 27px;
    bottom: -52px;
}

section.section-2 .rw.rw2 .bx .bulet {
    right: auto;
}
section.section-2 .container-inner .col-left {
    left: 40px;
    position: relative;
}
section.section-2 .rw.rw2 .bx1 .bulet {
	transform: rotate(60deg);
	right: 26px;
	bottom: -51px;
}

section.section-3 .col-left .rw .bx.bx p.title {
    font-size: 19px;
}

section.section-3 .container-inner .col-right h2 {
    font-size: 60px;
}

section.section-3 .container-inner .col-right {
    width: 42%;
}

section.section-3 .container-inner {
    padding-left: 70px;
}
	
}

.custom-modal-inner .j-w-iconss > p {
    margin: 0px 0 8px;
}

@media screen and (max-width: 1680px) {
.section-2 .modal-link:hover {
  transform: scale(1.015); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
}


section.section-1 .container-inner .col-right {text-align:right; }

.custom-modal-inner .right{width:100%;display: inline-block;}
.custom-modal-inner.popup1 .anc{ text-align: left;}
.j-w-iconss{width:100%; float:left;}
.j-w-iconss ul{width:100%; margin:0; padding:0;}
.j-w-iconss ul li{width:29%; list-style:none;  margin:4px; padding:10px; float:left; font-size:14px; text-align:left; border:2px solid #0000fe; min-height:195px;}
.j-w-iconss ul li b{font-size:18px}
.j-w-iconss ul li span{color:#0000fe; font-weight:bold;}
.custom-modal-inner.popup1 .anc a.btn, .custom-modal-inner.popup1 .anc button.btn{background:#0000fe;}

.j-w-iconss ul.pop01 li{min-height:156px;}
.j-w-iconss ul.pop02 li{min-height:115px; }
.j-w-iconss ul.pop03 li{min-height:100px;}

.j-w-iconss ul.pop04 li {
    min-height: 112px;
}

.j-w-iconss ul.pop05 li {
    min-height: 145px;
}

.j-w-iconss ul.pop06 li {
    min-height: 160px;
}

.j-w-iconss ul.pop07  li {
    min-height: 115px;
}