@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700&display=swap');

@font-face {
  font-family: 'Metropolis-Regular';
  src: url(../fonts/Metropolis-Regular.eot);
  src: url(../fonts/Metropolis-Regular.eot?#iefix) format('embedded-opentype'),
       url(../fonts/Metropolis-Regular.otf) format('otf'),
       url(../fonts/Metropolis-Regular.ttf) format('truetype'),
       url(../fonts/Metropolis-Regular.woff) format('woff'),
       url(../fonts/Metropolis-Regular.woff2) format('woff2'),
       url(../fonts/Metropolis-Regular.svg#Metropolis-Regular) format('svg');  font-display: swap;
}
@font-face {
  font-family: 'Metropolis-Medium';
  src: url(../fonts/Metropolis-Medium.eot);
  src: url(../fonts/Metropolis-Medium.eot?#iefix) format('embedded-opentype'),
       url(../fonts/Metropolis-Medium.otf) format('otf'),
       url(../fonts/Metropolis-Medium.svg#Metropolis-Medium) format('svg'),
       url(../fonts/Metropolis-Medium.ttf) format('truetype'),
       url(../fonts/Metropolis-Medium.woff) format('woff'),
       url(../fonts/Metropolis-Medium.woff2) format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'Metropolis-Light';
  src: url(../fonts/Metropolis-Light.eot);
  src: url(../fonts/Metropolis-Light.eot?#iefix) format('embedded-opentype'),
       url(../fonts/Metropolis-Light.otf) format('otf'),
       url(../fonts/Metropolis-Light.svg#Metropolis-Light) format('svg'),
       url(../fonts/Metropolis-Light.ttf) format('truetype'),
       url(../fonts/Metropolis-Light.woff) format('woff'),
       url(../fonts/Metropolis-Light.woff2) format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'Metropolis-Bold';
  src: url(../fonts/Metropolis-Bold.eot);
  src: url(../fonts/Metropolis-Bold.eot?#iefix) format('embedded-opentype'),
       url(../fonts/Metropolis-Bold.otf) format('otf'),
       url(../fonts/Metropolis-Bold.svg#Metropolis-Bold) format('svg'),
       url(../fonts/Metropolis-Bold.ttf) format('truetype'),
       url(../fonts/Metropolis-Bold.woff) format('woff'),
       url(../fonts/Metropolis-Bold.woff2) format('woff2'); font-display: swap;
}


body, p, ul li, ol li, a, .elementor-widget-text-editor{ font-family: 'Metropolis-Regular'; font-weight:400; font-size:16px; color:#425366; line-height:1.5}
h2, h3, h4, h5, h6{font-family: 'Titillium Web', sans-serif; font-weight:300; line-height:1.1}
h1{font-family: 'Titillium Web', sans-serif; font-weight:300; line-height:1.1}

/* zero padding */
 .m0{ margin:0px !important;} .p0{ padding:0px !important;} .pl0{ padding-left:0px !important;} .pr0{ padding-right:0px !important;} .pl-0{padding-left:0 !important} .pr-0{padding-right:0 !important}
 
/* padding left */
 .pl10{ padding-left:10px;} .pl15{ padding-left:15px;} .pl20{ padding-left:20px !important;}  .pl30{ padding-left:30px !important;}  .pl40{ padding-left:40px !important;}  .pl50{ padding-left:50px !important;} .pl60{ padding-left:60px !important;}  .pl70{ padding-left:70px !important;}  .pl80{ padding-left:80px !important;}  .pl90{ padding-left:90px;} .pl100{ padding-left:100px;} 
 
/* padding right */
 .pr10{ padding-right:10px;} .pr15{ padding-right:15px;} .pr20{ padding-right:20px;} .pr30{ padding-right:30px;}  .pr40{ padding-right:40px;}  .pr50{ padding-right:50px;} .pr60{ padding-right:60px;}  .pr70{ padding-right:70px;}  .pr80{ padding-right:80px;}  .pr90{ padding-right:90px;} .pr100{ padding-right:100px;} 
 
/* margin left */
 .ml10{ margin-left:10px;} .ml15{ margin-left:15px;} .ml20{ margin-left:20px;}  .ml30{ margin-left:30px;}  .ml40{ margin-left:40px;}  .ml50{ margin-left:50px;} .ml60{ margin-left:60px;}  .ml70{ margin-left:70px;}  .ml80{ margin-left:80px;}  .ml90{ margin-left:90px;} .ml100{ margin-left:100px;} 
 
/* margin right */
 .mr10{ margin-right:10px;} .mr15{ margin-right:15px;} .mr20{ margin-right:20px;} .mr30{ margin-right:30px;}  .mr40{ margin-right:40px;}  .mr50{ margin-right:50px;} .mr60{ margin-right:60px;} .mr70{ margin-right:70px;} .mr80{ margin-right:80px;} .mr90{ margin-right:90px;} .mr100{ margin-right:100px;}  

     /* padding for tab */
    .pt10{ padding-top:10px} .pb10{padding-bottom:10px} .pt15{ padding-top:15px} .pb15{padding-bottom:15px} .pt20{ padding-top:20px} .pb20{padding-bottom:20px} .pt30{ padding-top:30px !important} .pb30{padding-bottom:30px !important} .pt40{ padding-top:40px} .pb40{padding-bottom:40px} .pt50{ padding-top:50px} .pb50{padding-bottom:50px}  .pt60{ padding-top:60px !important} .pb60{padding-bottom:60px !important} .pt80{ padding-top:80px} .pb80{padding-bottom:80px} .pb90{padding-bottom:90px} .pt90{padding-top:90px} .pb100{padding-bottom:100px} .pt100{padding-top:100px} .pb110{padding-bottom:110px} .pt110{padding-top:110px} .pb120{padding-bottom:120px} .pt120{padding-top:120px} .pb130{padding-bottom:130px} .pt130{padding-top:130px} .pb140{padding-bottom:140px} .pt140{padding-top:140px}  .pb150{padding-bottom:150px} .pt150{padding-top:150px} .pb200{padding-bottom:200px} .pt200{padding-top:200px}
.pt100{ padding-top:100px !important} .pb100{padding-bottom:100px !important}
/* margin for tab */    
    .mt10{ margin-top:10px} .mb10{margin-bottom:10px !important} .mt15{ margin-top:15px} .mb15{margin-bottom:15px !important} .mt20{ margin-top:20px} .mb20{margin-bottom:20px} .mt30{ margin-top:30px} .mb30{margin-bottom:30px} .mt40{ margin-top:40px} .mb40{margin-bottom:40px} .mt50{ margin-top:50px} .mb50{margin-bottom:50px}  .mt60{ margin-top:60px} .mb60{margin-bottom:60px} .mt80{ margin-top:80px} .mb80{margin-bottom:80px} .mb90{margin-bottom:90px} .mt90{margin-top:90px} .mb100{margin-bottom:100px} .mt100{margin-top:100px} .mb110{margin-bottom:110px} .mt110{margin-top:110px} .mb120{margin-bottom:120px} .mt120{margin-top:120px} .mb130{margin-bottom:130px} .mt130{margin-top:130px} .mb140{margin-bottom:140px} .mt140{margin-top:140px}    .mb150{margin-bottom:150px} .mt150{margin-top:150px}  
.header-mobile {
    background: #fff !important;
    width: 100%;
    position: relative;
    z-index: 1;
}
.header-mobile .header-mobile-content {
    position: relative;
    padding: 13px 0;
    height: 80px;
}
.header-builder-frontend .header-mobile .header-mobile-content .canvas-menu a {
    color:#006DB2 !important;
    font-size: 24px;
}
.header-mobile .header-mobile-content .mobile-logo .logo-menu img {
    vertical-align: middle;
    width: 55px!important;
    max-width: 100%;
}
.header-mobile .header-mobile-content .main-search{display:none}
.primary-button a {
    background: #00c4b0;
    display: inline-block;
    line-height: 1;
    font-size: 16px;
    padding: 12px 24px;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: all .3s;
    border-radius: 0;
    background-position: right 10px center;    
	border:2px solid #00c4b0;
	transition:0.3s ease-in;
}
.primary-button a:hover{background:transparent;transition:0.3s ease-in; color:#00c4b0}

[data-splitting]{
    margin: 0;
    opacity: 0;
}
    .splitting .char {
      animation: slide-in .7s cubic-bezier(.3, 0, .7, 1) both;
      animation-delay: calc(50ms * var(--char-index));
    }
    
    @keyframes slide-in {
      from {
        transform: scale(0.4) translateY(80%);
        opacity: 0;
      }
    }

.titlecenter h2{  text-align: center;}
.titleanimbanner h1, .titleanimbanner h2{color:#fff !important}

@media screen and (min-width:1200px){
	h1{font-size:65px}
	h2, .h1head h1{font-size:50px}
	h3{font-size:30px}
	h4{font-size:25px}
	h5{font-size:22px}
	h6{font-size:18px}
}
@media screen and (max-width:1023px){
	h2, .h1head h1{font-size:28px}
	
}

@media screen and (max-width:767px){
	h1{font-size:30px}
	h2, .h1head h1{font-size:28px}
	h3{font-size:24px}
	h4{font-size:22px}
	h5{font-size:20px}
	h6{font-size:16px}
	body, p, ul li, ol li, a, .elementor-widget-text-editor{ font-family: 'Metropolis-Regular'; font-size:16px !important; color:#425366;line-height:1.5}
}

/*sa animation styles*/

.animated-section {
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards; /* Keeps the state at the end of the animation */
}
.start-animation {
  animation-play-state: running;
}

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.text-fade-in {
   opacity:0;  /* make things invisible upon start */
   animation:fadeIn ease-in 1;
   animation-fill-mode:forwards;
   animation-duration:1.4s;
  }
  
/*.gv-sticky-menu.stuck { background: rgba(0,0,0,.70)!important; transition-timing-function: ease-in-out; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); backdrop-filter: blur(30px);} .gv-sticky-menu.stuck  .gsc-logo{} */

 .elementor-button{cursor:pointer}
 .gva-navigation-menu li{padding-left:15px!important;  padding-right:15px!important;} .gva-navigation-menu li a{padding:20px 0px 5px 0px!important; position:relative }  .gva-navigation-menu li a:before{ content:''!important; width:0%;  height:2px; background:#00c4b0;  position:absolute;  bottom:0px;  left:0px; }  .gva-navigation-menu li:hover a:before{width:100%; transition: width 0.4s ease-in, height 0.15s 0.3s linear, opacity 0s 0.35s;} .gva-navigation-menu li:hover ul li a:before{ width:0%;}  .gva-navigation-menu li ul li:hover a:before{width:100%;} .gva-navigation-menu li a{ margin-bottom:25px} .ikp-footer .gva-navigation-menu li a{ margin-bottom:0px} .gsc-logo .site-branding-logo{padding: 10px 10px 10px 0px;} .ikp-footer .gva-navigation-menu li{padding-left:0px!important}
.home-showcase .swiper-slide-active > .swiper-image { height: 100vh; object-fit: cover;  transform: scale(1); background-position: center;
 background-size: cover; background-repeat: no-repeat; transition: all .5s;}
.home-showcase  .swiper-slide-active > .swiper-image { transform: scale(2); animation: bgScale 100s 1; transform: scale(1.2);}
/*banner animation*/
.home-showcase .swiper-slide-active .text-container .bigTitle {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-name: fadeInDown;  
  animation-delay: 0.3s; line-height:1.1;
}
 

.home-showcase .home-showcaseSlider .showcaseSlider-nav .showcaseSlider-prev::before, .home-showcase .home-showcaseSlider .showcaseSlider-nav .showcaseSlider-next::before{content:'';  position:absolute; width: 0px;  height: 24px; background: #00c4b0; bottom: -7px; transition: width 0.4s ease-in, height 0.15s 0.3s linear, opacity 0s 0.35s; transition: width 1s; }  .home-showcase .home-showcaseSlider .showcaseSlider-nav .showcaseSlider-prev:hover::before, .home-showcase .home-showcaseSlider .showcaseSlider-nav .showcaseSlider-next:hover::before{width: 40px;  }.home-showcase .home-showcaseSlider .showcaseSlider-nav .showcaseSlider-prev::before{right:0px;}  .home-showcase .home-showcaseSlider .showcaseSlider-nav .showcaseSlider-next::before{left:0px;} .home-showcase .home-showcaseSlider .showcaseSlider-nav .showcaseSlider-prev, .home-showcase .home-showcaseSlider .showcaseSlider-nav .showcaseSlider-next{ width:40px!important; height: 30px!important; position: relative!important;}   
/*banner animation close*/

/*.impact .elementor-image-box-title{transform: translate(-140%, 0); transition: transform 1.15s cubic-bezier(0.58, 0, 0.28, 0.99) 0.4s; }*/

.about-carousel.owl-carousel .about-card{transition: opacity .45s ease-out;   will-change: opacity;}.about-carousel.owl-carousel .about-card.anima{    opacity: 1; transform: scale(.999); will-change: auto;}
#customers-testimonials .owl-item.active{opacity:.4} #customers-testimonials .owl-item.active.center{opacity:1} 
  .about-carousel .about-card img{width:100%!important;max-height:323px; object-fit:cover} .about-carousel .about-card p{background:#fff}
/*image scale*/
.about-carousel .about-card img, .method__img img { width: 100%;  transition: transform 2s ease; transform: scale(0.8); opacity: 0; }
.about-carousel .about-card img.ikpactive, .method__img img.ikpactive, .about-carousel .about-card img.ikpactive { transform: scale(1); opacity: 1; } 
/*image scale close*/

@keyframes bgScale {
  0% {
      transform: scale(1);
    }
  100% {
      transform: scale(4);
    }
}

.circle-btn:hover, .whyikp-carousel.owl-carousel .owl-nav > div.owl-next:hover, .whyikp-carousel.owl-carousel .owl-nav > div.owl-prev:hover, .events-carousel.owl-carousel .owl-nav > div.owl-next:hover, .events-carousel.owl-carousel .owl-nav > div.owl-prev:hover{ background-color:#00c4b0;  border:1px solid #00c4b0} .blogs-socialmedia { margin-left: 40px;} .blogs-socialmedia .nav-tabs .nav-link:hover{ background:none; border:1px solid #053B83 } .blogs-card:hover .blogs-card-thumb{transition: transform 1s ease;  transform: scale(1.1);}  .get-in-touch{background-position: center; background-attachment: fixed;} .events-carousel .owl-item.active .event-date .month{ top:-170px; position:relative;   -webkit-animation-duration: 1s;
  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both; animation-name: fadeInDown; animation-delay: 0.3s;}  .events-carousel .owl-item.active .event-date .day{bottom:-170px; position:relative;  -webkit-animation-duration: 1s;
  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both; animation-name: fadeInUp; animation-delay: 0.3s;} .events-carousel .owl-item.active.center .event-date .month{top:0px; } .events-carousel .owl-item.active.center .event-date .day{bottom:0px;} .owl-carousel.events-carousel .owl-item.active .event-details{right:-170px;  position:relative; -webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both; animation-name: fadeInRight; animation-delay: 0.3s} .events-carousel .owl-item.active.center .event-details{right:0px;} 
  
  .blogs-carousel .owl-item .blogs-card-content{right:-170px;  position:relative; -webkit-animation-duration: 2s;
  animation-duration: 2s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both; animation-name: fadeInLeft; animation-delay: 0.3s} .blogs-carousel .owl-item.active .blogs-card-content{right:0px;}  
  .services .owl-item .box-content .icon-inner, .services .owl-item .box-content .box-title{ position:relative;   transition-timing-function: ease; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);}
  .services .owl-item .box-content:hover .icon-inner{top:-100px;  }
  .services .owl-item .box-content:hover .box-title{bottom:-100px;  } .init-carousel-owl  .owl-nav i{ top: 25%; position: relative; transform: translateY(-50%);}  


@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

 
 @media (min-width: 992px){
 .main-header .toggle-menu ul.gva-nav-menu > li > a{padding: 10px 0 0px !important;}
 }

@media screen and (max-width:1200px){
.about-carousel .about-card img{max-height:320px; object-fit:cover}
}
@media screen and (max-width:992px){
.about-carousel .about-card img{max-height:240px}
}