/* ==============================
   1. Imported styles
   ============================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
 

@import url(font-awesome.min.css); 
@import url(animate.css);
@import url(owl.carousel.min.css); 
@import url(owl.theme.default.min.css); 
@import url(bulma-steps.min.css);

/* ==============================
   common color
   ============================== */

:root {
  --color-primary: #18469D;
  --color-secondry: #00CDE5; 
  --color-light-blue: #b8e6eb; 	
  --color-border-gray: #e0e0e0;
  --color-form-bg: #174473;
  --color-gray-header: #aaaaaa;	
  --color-bg-blue:#f1fdff;  
  --anim: .5s ease-out all;
}

.anim{ transition: var(--anim); -moz-transition: var(--anim); -webkit-transition: var(--anim);}
.contact-form p {padding-bottom: 0px !important;}
a:hover{color:var(--color-primary) !important;}
.white-text{color: #ffffff !important;}
.main-menu a:hover{color: #08b6b6 ;}
.is-black:hover{background-color: var(--color-primary) !important; color: #ffffff !important;}
.primary-btn{background: rgb(24,112,157);
background: linear-gradient(274deg, rgba(24,112,157,1) 0%, rgba(24,70,157,1) 100%);color: #ffffff !important; border: 1px solid #18469D;}
.primary-btn:hover{background: rgb(0,205,229);
background: linear-gradient(274deg, rgba(0,205,229,1) 0%, rgba(24,70,157,1) 100%); color: #ffffff !important; border: 1px solid #00CDE5;}
.secondry-btn{background-color: var(--color-secondry) !important;; color: #ffffff !important; border: 1px solid #b8e6eb;}
.secondry-btn:hover{background-color:#37d5f7 !important;color: #ffffff !important; border: 1px solid #b8e6eb;}
.secondry-btn:focus{background-color: #69d1dc; color: #ffffff !important;border: 1px solid #b8e6eb;}
.primary-text{color:var(--color-primary);}
.secondry-text{color:var(--color-secondry);}
.primary-bg{background-color: var(--color-primary);}
.secondry-bg{background-color:var(--color-secondry);}
.button-border{border: 2px solid #ffffff; background-color: transparent !important; color: #ffffff !important;}
.button-border:hover{background-color: #000000 !important; color: #ffffff !important;}
b { font-weight: 600 !important;}
.wrap-text-2{ overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
.wrap-text-3{ overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }
/* ==============================
   content fixed
   ============================== */
.welcome-text b{padding-left: 2px;}
.header{-webkit-transition: all 0.5s ease; -moz-transition: position 10s; -ms-transition: position 10s;  -o-transition: position 10s;  transition: all 0.5s ease;} @keyframes smoothScroll {0% {		transform: translateY(-40px);}100% {transform: translateY(0px);	}}
.header.fixed{position:fixed;top:0;  z-index: 99;animation: smoothScroll 1s forwards;}
.header.fixed .navbar-menu.is-active { right: 10px; top: 65px;}
.header.fixed .navbar-dropdown  {top:100% !important;}
.header.fixed .level, .header.fixed .virtual-box{display: none;}
.header.fixed .navbar{border-radius: 0px 0px 10px 10px;}



/* ==============================
   common styles
   ============================== */

body { font-family: 'Poppins', sans-serif; font-size: 16px; padding: 0px; margin: 0px; overflow-x: hidden; line-height: normal;}
img { max-width: 100%;}
h1,h2,h3,h4,h5,h6 { font-family:  'Poppins', sans-serif; font-weight: 500;}
.button {text-transform: uppercase; font-weight: 600;}
.bg-cover-image {background-position: center center; background-repeat: no-repeat; background-size: cover !important;}
.scrollup {width: 34px; height: 34px; position: fixed; bottom: 25px; right: 10px; text-align: center;z-index: 100;  display: none; background-color:var(--color-primary); color: #ffffff; border-radius:5px; font-size: 30px; line-height: 0px; font-weight: bold; border: 1px solid  var(--color-primary);}
.scrollup:hover{background-color:var(--color-secondry); color: #ffffff !important; border: 1px solid  var(--color-secondry);}
ul.check-list{list-style: none; padding-left: 20px;}
ul.check-list li{padding-left:16px;position: relative; font-weight: 400; margin-bottom:10px;}
ul.check-list li:before {font-family: 'FontAwesome';content: '\f00c  '; margin:0 5px 0 -15px; position: absolute; left: 0; top:3px; font-size: 21px;}
.videoWrapper {  position: relative;  padding-bottom: 56.25%;  /* 16:9 */  padding-top: 25px;  height: 0;}
.videoWrapper iframe {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%; border-radius: 10px;} 
.preloader{ position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999; background-color: #ffffff;
    background-position: center center;  background-repeat: no-repeat;  background-image: url(../img/preloader.svg);}
/*.input, .textarea, .select select{background-color: #ffffff; border-bottom: 2px solid #ffffff; border-left: none; border-right: none; border-top: none; border-radius: 25px; box-shadow:none !important;}*/
.input, .textarea, .select select{background-color: #ffffff; border: 1px solid #DDDDDD; box-shadow:none !important;}
.control.has-icons-left .icon, .control.has-icons-right .icon{color: #161616;}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */  color:    #525252 !important;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  color:    #525252 !important;   opacity:  1;}
::-moz-placeholder { /* Mozilla Firefox 19+ */  color:    #525252 !important;   opacity:  1;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */   color:    #525252 !important;}
::-ms-input-placeholder { /* Microsoft Edge */  color:    #525252 !important;}
::placeholder { /* Most modern browsers support this now. */   color:    #525252 !important;}
.image-effect { position: relative;  margin: auto;  overflow: hidden;}
.image-effect img { max-width: 100%; transition: all 0.3s;  display: block;  width: 100%;  height: auto;  transform: scale(1);}
.image-effect:hover img {  transform: scale(1.1);}
.cndkbeforeafter-item img{max-width: fit-content !important;}
 
p{padding-bottom: 10px;}
.title{font-size: 50px; font-weight: 600;}
.subtitle{font-size: 36px; font-weight: 600;}
.subtitle2{font-size: 30px; text-transform: uppercase; font-weight: 600;}
.title-sub{font-size: 15px; text-transform: uppercase; font-weight: 600; color: var(--color-secondry) !important;}

/* ==============================
   Menu
   ============================== */
.header{ position: relative;  margin: 0 auto; z-index: 99; background-color: var(--color-primary); padding-left: 30px; padding-right: 30px; } 
.logo-main img{height: 90px; width: auto;}
.header .level{margin: 10px 10px 10px 10px; font-size: 14px;}
.header .level a{margin-left: 16px; color: #313131;}
.navbar-start a{color:#413f3f !important;}
.navbar-start a:hover,.navbar-start a:focus{color: var(--color-primary) !important;}
.menu-gradient{background-color: rgb(216,242,246);background-color: linear-gradient(11deg, rgba(216,242,246,1) 0%, rgba(198,234,239,1) 100%);}
.navbar-dropdown{ border: none !important;}
.navbar-dropdown.border{border-radius: 10px;}
.navbar{background-color: transparent !important; padding: 0px 0px 0px 0px; }
.navbar-item.is-mega { position: static !important;}
.navbar-item {font-weight: 600;}
.main-menu .navbar-end{text-transform: uppercase; font-weight:500;}
.main-menu .navbar-end .is-active{color: var(--color-secondry);}
.navbar-link:not(.is-arrowless)::after {  border-color: #BCBCBC;}
.navbar-item {font-weight: 600; text-transform: uppercase; font-size: 16px; border: none !important; color: #ffffff;} 
.navbar-item:hover,.navbar-item:focus{background-color: transparent !important; border: none !important; color: var(--color-secondry) !important;;}
a.navbar-item.is-active:not(:focus):not(:hover), .navbar-link.is-active:not(:focus):not(:hover){border: none !important;}
.navbar-item img{max-height: none;} 
.drop-down-custom {font-family: 'Oswald', sans-serif; padding: 25px 0px 14px 0px;}
.drop-down-custom .title{font-size: 17px; font-weight: 600; letter-spacing: normal; margin: 0px 0px 10px 0px;}
.drop-down-custom .title:hover{color: var(--color-secondry) !important;}
.navbar-dropdown a.navbar-item { font-family: 'Poppins', sans-serif;letter-spacing: normal; text-transform: none; font-size: 15px; font-weight: 400; color: #1D1D1D !important;}
.navbar-dropdown a.navbar-item:hover{color:var(--color-secondry) !important; text-decoration: underline;}
.drop-down-custom a.navbar-item {  padding:0px 0px 10px 0px !important;}
 
/* ==============================
   common
   ============================== */ 
.main-banner{ background-repeat: no-repeat; background-size: cover; position: relative;}
.main-banner:before{content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;background: rgb(255,255,255);
background: linear-gradient(274deg, rgba(255,255,255,0) 0%, rgba(24,70,157,1) 100%);}
.banner-content{position: relative; z-index: 1; color: #ffffff; font-size: 18px; padding-top: 30px; padding-bottom: 30px;}
.banner-content.thankyou-content{padding-top: 70px; padding-bottom: 70px;}
.banner-content ul li{ font-weight: 600 !important;}
.banner-content .title{font-size: 50px; color: #ffffff; font-weight: 700;}
.banner-form{background-color: rgba(255,255,255,0.8); padding: 30px; border-radius: 5px; border-top: solid 10px var(--color-secondry) !important; }
.banner-form .title{color: #000000; font-size: 30px !important; font-weight: 600; text-align: center;}
.banner-form .column { padding: .34rem;}
.banner-bridge{position: absolute; z-index: 1; bottom: 0; left: 0; height: 140px;}

.bg-gray{background-image: url("../img/bg-gray.jpg"); background-position: right bottom; background-color: #f9f9f9; background-repeat: no-repeat; background-size: cover;}
.bg-blue{ background-size: cover; position: relative;} 
.bg-blue:before{content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color:rgba(24,70,157,.7);}

.service-box{text-align: center;}
.service-box .pic{ height: 190px; overflow: hidden; border-radius: 10px; margin-bottom: 18px;}
.service-box .pic img{object-fit: cover;max-width: 100%; transition: all 0.3s;  display: block;  width: 100%;  height: auto;  transform: scale(1);}
.service-box .pic:hover img {  transform: scale(1.1);}
.service-box .title{font-size: 21px; color: #ffffff; font-weight: 600;}

ul.space-line li{ margin-bottom: 14px;}
.section-pic{background-size: cover;} 
.service-section{padding-bottom: 250px !important;}
.section-overlap{ position: relative; padding-top: 0px; margin-top: -230px;}

.custom-step .step-item .step-details { margin-top: 4rem !important; background-color: #18469D; border-radius: 10px; padding: 21px 14px 14px !important; min-height: 230px; font-size: 16px !important; color: #ffffff;transition: all 0.5s ease;}
.custom-step .step-item .step-details .title{font-size: 21px; font-weight: 600; text-align: center; color: #ffffff; margin-bottom: 10px;}
.custom-step .step-item .step-details:hover{background-color: var(--color-secondry); transition: all 0.5s ease;}
.custom-step .step-item.is-info.is-active .step-marker { background-color: #fff; border-color: #18469D; color: #181818;font-family: 'Oswald', sans-serif;}
.custom-step .step-item.is-info::before {   background: -webkit-gradient(linear,right top,left top,color-stop(50%,#18469D),color-stop(50%,#18469D));    background: linear-gradient(to left,#18469D 50%,#18469D 50%);   background-size: 200% 100%;   background-position: right bottom; } 

.cta-section {font-size: 18px; position: relative; padding-bottom: 0px !important; margin-bottom: -140px;}
.cta-pic{ background-image: url("../img/cta-pic.png"); background-repeat: no-repeat; background-position: right top;}
.cta-section .title{font-size: 45px;} 

.footer{background-color: var(--color-primary); text-align: center; color: #ffffff; padding-bottom: 0px !important; padding-top: 180px;}
.footer.thankyou-footer{ padding-top: 30px !important;}
.footer a{color: #ffffff !important;}
.footer a:hover{color:var(--color-secondry);}

.footer-link a{color:var(--color-secondry) !important; margin: 0px 5px;}
.footer-link a:hover{  color: #ffffff !important;text-decoration: underline;}

.footer-logo{height: 140px;}
.address{font-size: 20px; color: #ffffff; text-transform: uppercase; font-weight: 600;}
.copyright{border-top: 1px solid rgba(255,255,255,.3); padding-top: 20px; margin-top: 30px; padding-bottom: 20px;}

.banner-ticks{ background: rgb(24,70,157);
background: linear-gradient(274deg, rgba(24,70,157,1) 0%, rgba(24,112,157,1) 48%, rgba(24,70,157,1) 100%); padding-top: 30px !important; padding-bottom: 30px !important;}
.banner-ticks ul{ list-style: none; padding-left: 20px; display: flex;  flex-wrap: wrap;}
.banner-ticks ul li{ padding-left: 16px; position: relative; margin-bottom: 10px; flex: 1 1 calc(25% - 20px); /* 25% width minus padding and margin adjustments */  box-sizing: border-box; color: #ffffff; font-weight: 500;}
.banner-ticks ul li:before {font-family: 'FontAwesome';content: '\f00c  '; margin:0 5px 0 -15px; position: absolute; left: 0; top:3px; font-size: 21px; color: var(--color-secondry);}

.client-logo{ padding-top: 14px !important; padding-bottom: 14px !important;}
.logos-carousel .item{ background-color: #ffffff; border-radius:10px; padding: 10px; height: 90px; position: relative; line-height: 90px; text-align: center; vertical-align: middle;  display: flex;  align-items: center; overflow: hidden; border: 1px solid #e8e8e8;}
.logos-carousel .item img{object-fit: contain!important;  margin: 0 auto; height: 45px;}
.logos-carousel .item img:hover{filter: gray; filter: grayscale(1); }

.thankyou-logo{margin: 0 auto;}
.section {padding: 5rem 3rem; }

/* Accordion*/
/* Basic styling for the accordion container */
.accordion {
	border: 1px solid #dbdbdb; /* Light gray border (Bulma-like) */
	border-radius: 4px;
}

/* Style for the clickable header */
.accordion-header {
	background-color: rgba(255, 255, 255, .3);
	padding-top: 20px;
	padding-bottom: 20px;
	cursor: pointer;
	border-bottom: 1px solid #dbdbdb;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.accordion-header h4.title {
	font-size: 23px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
}

/* Remove bottom border on the last item's header */
.accordion-item:last-child .accordion-header {
	border-bottom: none;
}

/* Style for the content area */
.accordion-content {
	/* These are key for the accordion effect */
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out, padding 0.3s ease-out;
	padding: 0 1rem; /* Padding needed for inner content */
}

/* Style for the active state */
.accordion-item.is-active .accordion-content {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* Rotate the icon when active */
.accordion-item.is-active .accordion-header .icon i {
	transform: rotate(180deg);
	transition: transform 0.3s ease-out;
}

.accordion-header .icon i {
	transition: transform 0.3s ease-out;
}

.header-buttons {
    display: flex;
    flex-direction: row;
    width: 100%;
}
/*==============================================
    Responsive
===============================================*/
 
@media only screen and (max-width: 1408px) { 
	.hide-wide{display: none;}
}
@media only screen and (max-width: 1320px) {
	.banner-content .title{font-size: 50px;} 
}
@media only screen and (max-width: 1215px) {	
	.custom-step .step-item .step-details { padding: 10px !important; min-height: auto; font-size: 14px !important; color: #ffffff;}
	.navbar {padding: 0px;}
	.title{font-size: 36px; font-weight: 500;}
	.subtitle{font-size: 27px;}
	.cta-pic{background-image: none;}
}
	
@media only screen and (max-width: 1024px) {
	.banner-ticks ul li{ flex: 1 1 calc(50% - 20px);}
	.navbar-menu {background-color: var(--color-primary) !important;}
	.navbar-burger {  color: #ffffff !important;}
	.navbar-burger span {height: 2px;}
	.drop-down-custom .title {font-size: 14px;}
	.navbar-menu.is-active, .header.fixed .navbar-menu.is-active { display: block; position:absolute;  top:100%; right: 0; width: 300px;}
	.navbar-burger:focus, .navbar-burger:hover{background-color: transparent !important;}
	.navbar,.navbar-brand,.navbar-burger{min-height: 0rem !important;}
	.navbar-burger{top: 18px;}
	.navbar-item img{max-height:4.5em;}
	.header{padding: 0px 0px 0px 0px;}	
	.header.fixed { padding-right: 0px;}
	.banner-bridge{display: none;}
	.banner-content{padding-top: 0px; padding-bottom: 0px;}
	.section {padding: 3rem 3rem; }	
}
@media only screen and (max-width: 768px) {	 
	.cta-section .title{font-size: 36px;} 
	.banner-content .title{font-size: 36px;}
	.banner-form .title{font-size: 25px !important;}
	.title{font-size: 30px; font-weight: 500;}
	.subtitle{font-size: 25px;}
	.section {padding: 2rem 1rem; } 
	.custom-step .step-item .step-details { width: 250px; margin-bottom: 10px;}
	.banner-ticks ul li{ flex: 1 1 calc(100% - 0px); font-size: 18px;}
	.service-box .pic {display: none;}
	.service-box { background-color:rgba(255,255,255,.3); padding-top: 20px; padding-bottom: 20px; }
	.service-box .title {font-size: 23px;}
	.desktop-columns{display:none!important;}
}
@media only screen and (min-width: 769px) {
	.accordion{display:none!important;}
}

@media screen and (max-width:768px) {
    .header-buttons {
      flex-direction: column;
      gap: 10px;
    }
    .header-buttons a {
      font-size: 1rem !important;
      margin: 0 !important;
    }
}

@media only screen and (max-width: 550px) {
	
	.custom-step .step-item .step-details { width: 140px; margin-bottom: 10px;}
	.custom-step .step-item .step-details .title{font-size: 18px;}
}