

body{font-family: "Poppins", sans-serif; font-size:14px; color:#343a40; line-height:24px; font-weight:400; overflow-x:hidden; position: relative;}
/* body:before{position:absolute; content:''; width:100%; height:20%; inset:0; background: rgb(26,38,53);
background: linear-gradient(180deg, rgba(26,38,53,1) 0%, rgba(255,255,255,1) 100%);} */
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-scrolling iframe{pointer-events:none}

:root {
  --color-blue: 8 47 95; /* #082f5f in decimal RGB*/
  --color-dark: 13 27 54; /* #0d1b36 in decimal RGB*/
  --color-grey: 136 136 136; /* #888888 in decimal RGB*/
  --color-lightblue: 217 246 252; /* #d9f6fc in decimal RGB*/
  --color-lightgrey: 242 242 242; /* #363e4c in decimal RGB*/
  --color-white: 255 255 255; /* #ffffff in decimal RGB*/
  --box-shadow: 0 10px 50px rgb(var(--color-lightblue)/120%);
}

.shadow {
    box-shadow: 0 6px 10px rgb(var(--color-lightblue) / 120%) !important;
}
.text-blue{color:rgb(var(--color-blue));}
.bg-blue{background:rgb(var(--color-blue));}

.img-height{
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  border-radius: 100px 100px 300px !important;
  width: 90% !important;
}

.silverbg{background: rgb(169,169,169);
background: linear-gradient(148deg, rgba(169,169,169,1) 0%, rgba(235,235,235,1) 10%, rgba(255,255,255,1) 27%, rgba(188,188,188,1) 42%, rgba(240,240,240,1) 67%, rgba(162,162,162,1) 87%, rgba(173,173,173,1) 100%);}

a{color:#000; text-decoration:none;}
a:hover{color:#000;}
a, .btn, .shrink.navbar-brand, .navbar, .videobox i, .list-1 li:hover:before{-webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	margin-bottom: 3vw;
}
h1, .h1 {
  font-size: clamp(24px, 4vw, 48px);
}
h2, .h2 {
  font-size: clamp(24px, 4vw, 40px);
}
h3, .h3 {
  font-size: clamp(24px, 4vw, 36px);
}
h4, .h4 {
  font-size: clamp(24px, 4vw, 30px);
}
h5, .h5 {
  font-size: clamp(14px, 4vw, 24px);
}
h6, .h6 {
  font-size: 18px; font-weight:500;
}

.title-text{color: #036;}







/*---------------Header Start -----------------*/


/*.spacer{height: 105px;}*/
.navbar{position:sticky; width:100%; z-index:99; top:0; background-color: #fff; padding: 15px 0;}
.navbar .btn-link{padding-right:0;}
/* .shrink.navbar{background:rgb(var(--color-dark));} */









/*---------------Header End -----------------*/


/*---------------Button Start -----------------*/

/* .btn{padding: 12px 30px; font-size: 14px; font-weight:400; color: rgb(var(--color-white)); border:0;}
.btn i{font-size:25px; vertical-align: middle; margin-right:5px;} */
/* .btn:hover{color:#fff; background:#000;} */
.btn-lg{font-size:18px; padding:14px 40px;}

.btn-primary{background-color:rgb(var(--color-blue)); border-color:rgb(var(--color-blue));}
.btn-outline-light{border-color:rgb(var(--color-white)); border:1px solid;}
.btn-danger{background-color: #900!important; border: none;}

/*---------------Button End -----------------*/

.btn{border-radius:30px; padding:12px 28px; font-size: 14px; font-weight:400; text-transform: uppercase;}
.btn:hover{color:#fff; background: var(--clr-yellow); border-color: var(--clr-yellow);}
.btn i{font-size:20px; vertical-align: top; transition: transform 0.3s ease-out; padding-left:4px;}
.login i{vertical-align: middle; margin-right: 5px;}
.btn:hover i{transform: translateX(4px)}
.btn-sm{padding:4px 15px; font-size:12px;}


/*---------------Menu Start -----------------*/

.navbar {z-index: 10;}
.navbar-brand {max-width: 170px; z-index: 1;}
.shrink .navbar-brand{max-width:100px;}
.navbar-brand:focus, .navbar-brand:hover{box-shadow:none!important;}
.nav {gap: 30px;}
.nav-item a {
  color: #000;
  font-size: 16px;
  font-weight: 500;
  padding-inline: 0;
  box-shadow: inset 0 0 0 0;
  transition: all 0.3s ease-in-out;
  padding:0;
}
.nav-item a:hover, .nav-link.active, .nav-link:focus, .nav-link:hover {
  color: rgb(var(--color-grey));
}

.navbar-toggler{border-color:rgb(var(--color-white)); padding:3px 10px;}
.hamburger .line{
  width: 24px;
  height: 1px;
  background-color:rgb(var(--color-white));
  display: block;
  margin: 8px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hamburger:hover{
  cursor: pointer;
}
.hamburger.is-active .line:nth-child(2){
  opacity: 0;
}
.hamburger.is-active .line:nth-child(1){
  -webkit-transform: translateY(10px) rotate(45deg);
  -ms-transform: translateY(10px) rotate(45deg);
  -o-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}
.hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-9px) rotate(-45deg);
  -ms-transform: translateY(-9px) rotate(-45deg);
  -o-transform: translateY(-9px) rotate(-45deg);
  transform: translateY(-9px) rotate(-45deg);
}
.backarrow{font-size: 24px;
    width: 14px;
    height: 27px;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*---------------Menu End -----------------*/
.menu-bottom-section{background-color: #021256;}
.menu-bottom-section img{height: 150px; padding: 18px 0;}

/* .inerbanner img{height: 500px; object-fit: cover;} */
.inerbanner img{aspect-ratio: 3/1; object-fit: cover;}

.inerbanner .card:before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-color: transparent;
  background-image: linear-gradient(130deg, #036 0%, #5f96cd 100%);
  opacity: .4;
}


.bg-4 {
    min-height: 255px;
    background-attachment: fixed!important;
    background-size: cover!important;
    position: relative;
    background: url("images/credit-cards.png") center no-repeat;
}
.bg-4:before {
  content: '';
  position: absolute;
  width: 100%;
  background: rgba(0, 0, 0, 30%);
  height: 100%;
}
.gallery {
  padding: 90px 0 0 0;
  overflow: hidden;
  position: relative;
}
.texthead {
  font-size: 36px;
  color: #fff;
  margin: 0 0 34px 0;
  padding: 0;
  font-weight: 300;
  text-transform: uppercase;
  display: block;
}
hr{
  border-top-color: #cccccc;
  margin: 2rem 0;
}
.line {
  text-align: center;
  width: 100px;
  margin: 25px auto;
  margin-top: 10px;
}

.parallax-bg{background: #000; opacity: .8; padding: 40px 30px;}
.parallax-bg .list li {
  margin-bottom: 25px;
  font-size: 22px;
}
.parallax-bg .list li:before {
  background: #fadc38a1;
    border-radius: 100%;
    padding: 3px;
}



.design-card .card{padding: 30px 30px; border-radius: 15px 15px 15px 50px; height: 100%;}


/*---------------Banner Start -----------------*/

.banner-bg{background-image: linear-gradient(130deg, #036 0%, #5f96cd 89%);}
/*
.banner{position:relative; background:url("images/silverbg.jpg") no-repeat; width:100%; border-radius: 300px 140px 100px !important; background-size:cover;}
.banner img{margin-top: -47px;
  margin-bottom: -39px;
  border-radius: 0 0 165px 215px;}
*/
.banner img{margin-bottom: -40px;}
.banner-section .h1{font-size: clamp(24px, 6vw, 90px); text-transform: uppercase; font-weight:700;}
.banner-section h2{font-weight:100; font-size: clamp(14px, 4vw, 40px)}
.bulletline{border-radius:0!important; margin-left:10px; margin-top: 0 !important;}
.banner-section .bulletline{filter: invert(92%) sepia(98%) saturate(5764%) hue-rotate(186deg) brightness(119%) contrast(106%);}
.linebullet:after{position: absolute; content:''; right:0; background:url("images/bulletline.png"); width:60px; height:7px; top:50%; transform: translate(0, -50%);}

/*---------------Banner End -----------------*/




/*-------------- video start ----------*/

.videobox img{border-radius: 100px 100px 300px !important; aspect-ratio: 1 / 1; object-fit: cover;}
.videobox i{font-size:50px;background:rgb(var(--color-white));border-radius: 100%;padding:35px;width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;
position: absolute;bottom:0;left:0; right:0; margin:0 auto; color:rgb(var(--color-dark)); top:50%; transform:translate(0, -50%);}
.videobox:hover i{background:rgb(var(--color-blue)); color:rgb(var(--color-white));}

/*-------------- video end ----------*/




/*-------------- midbanner start ----------*/

.midbanner{position:relative; background: rgb(9,48,96);
background: linear-gradient(157deg, rgba(9,48,96,1) 0%, rgba(43,76,117,0.9612219887955182) 100%);}
.midbanner:before{position: absolute; content:''; top:0; right:0; background:url("images/shapeline.png") top right no-repeat; width:100%; height:100%; background-size: contain; opacity:.2;}
.smallsquare:before, .smallsquare:after{position: absolute; content:''; width:60px; height:60px; border:1px solid #3b5a80;}
.smallsquare:before{top:0; left:0;}
.smallsquare:after{bottom:0; right:0;}

/*-------------- midbanner end ----------*/

.bgshape:before{position: absolute; content:''; inset:0; width:100%; height:100%; background:rgb(var(--color-lightgrey));; top:15%;}

.list{margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  column-gap: 30px;
  text-align: left !important;}

  .list li {
    margin-bottom: 10px;
    padding-left: 40px;
    position: relative;
   }
.list li:before {
  font-family: "Line Awesome Free";
  position: absolute;
  left: 0;
  content: '\f00c';
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.dark-list .list li:before {
  color: #000!important;

}
.dark-list .list li{
  font-size: 18px;

}
.list2 li:before{ color: #000;}



.pricing-card .list li {
  margin-bottom:10px;
  position: relative;
  display: grid;
  align-items: flex-start;
  gap: 10px;
  grid-template-columns: 1fr auto;
}
.pricing-card .list li:before {
  font-family: "Line Awesome Free";
  content: '\f00c';
  font-weight: 700;
  background: #e2dfee;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  width:24px;
	font-size:18px;
}
.pricing-card .list li:before {color:#036;}
.pricing-card .card-body{padding-inline: 30px;}
.pricing-card .btn:hover{background: #000; color: #fff;}
.card-group{gap:30px;}
.grid-price{display: grid; gap: 30px; grid-template-columns: 1fr 1fr;}
.pricing-card img{width: 100px; border-radius:20px;}
.pricing-card .card{border-radius: 10px!important; overflow: hidden; border:0;}
.pricing-card .card-header{border:0; background:none; margin:20px;}
.pricing-card .card-title{margin-bottom:0;}


/*-------------- list1 start ----------*/

.list-1 {margin:0; list-style:none;  counter-reset: ordered; margin-left:30px;}
.list-1 li {margin-bottom:40px;font-size:18px;}
/* .list-1 li:hover{cursor:pointer; color:rgb(var(--color-blue));} */
.list-1 li:before {background:rgb(var(--color-lightgrey));border-radius:8px;content: counter(ordered);counter-increment: ordered;display: inline-block;margin-left: -60px; position: absolute;width: 45px;height: 45px;display: flex;justify-content: center;align-items: center; font-weight:700;}
.list-1 li:hover:before{background:rgb(var(--color-blue)); color:rgb(var(--color-white));}
.list2 li:before{}

/*-------------- list1 end ----------*/
.smallgap{margin-top:10px; margin-bottom:30px; font-weight: 700;}

/*-------------- testimonial start --------*/

/* .toptestimonial{background: linear-gradient(232deg, rgba(169, 169, 169, 1) 0%, rgba(235, 235, 235, 1) 10%, rgba(255, 255, 255, 1) 27%, rgba(188, 188, 188, 1) 42%, rgba(240, 240, 240, 1) 67%, rgba(162, 162, 162, 1) 87%, rgba(173, 173, 173, 1) 100%);border-radius:40px; padding:2px;}

.testimonialbox{background: rgb(169,169,169);
background: linear-gradient(148deg, rgba(169,169,169,1) 0%, rgba(235,235,235,1) 10%, rgba(255,255,255,1) 27%, rgba(188,188,188,1) 42%, rgba(240,240,240,1) 67%, rgba(162,162,162,1) 87%, rgba(173,173,173,1) 100%);border-radius:40px; overflow: hidden;}

.testimonial.slick-slider{margin-inline: -15px;} */
.testimonial .slick-track { display: flex !important; }
.testimonial h5{font-size: clamp(14px, 4vw, 18px); margin-bottom:0; font-weight:normal; padding: 15px;}
.testimonial .slick-slide{margin:5px; position: relative; padding:10px; margin-top: 0; padding-top: 0;}
/*
.testimonial span{display:block; margin-top:10px; font-size:16px;}
.testimonial .slick-dots{font-size: 0; text-align: center; margin-bottom:0; margin-top:20px; padding: 0;}
.testimonial .slick-dots li{position: relative;display: inline-block;}
.testimonial .slick-dots li button {padding:6px; width:10px; height:10px; border-radius:50px;background:#888; border:0; margin:0 10px 0 0;}
.slick-dots li.slick-active button{opacity:1;background:#15aff8;}
*/

.testimonial .slick-arrow{position: absolute; top: 50%; transform: translate(0, -50%); font-size:30px; border:0;background:none; cursor: pointer; padding:0; border-radius:0; z-index:9;}
.testimonial .bi.bi-chevron-right, .testimonial .bi.bi-chevron-left{align-items: center; display: flex; justify-content:center; color:rgb(var(--color-dark));}
.testimonial .bi.bi-chevron-right{right:-15px;}
.testimonial .bi.bi-chevron-left{left:-15px;}
.testimonial-head{background-color:#036; color: #fff; display: flex; padding: 14px 20px; gap: 12px; border-radius: 5px 5px 0 0;}
.testimonial-head .profile-pic{mix-blend-mode: lighten; max-width: 40px;}
.testimonial-head p{margin-bottom: 0;}
.testimonial-head .rating{height: 14px;}
.testimonial-head .date{color: #ccc; font-size:14px; margin-top:10px; display: block;}
.testimonial p{padding:15px;}

/*-------------- testimonial end ----------*/

.silverline{position:relative;}
.silverline:before{position:absolute; content:''; inset:0; background: url("images/shapeline.png") no-repeat; background-size:cover; opacity:.1; transform:rotate(-180deg);}


/*-------------- faqbox start -----------*/

.fqbox{position:relative; background: url("images/creditcard.jpg") no-repeat; width:100%; height:100%; border-radius: clamp(30px, 4vw, 70px); overflow: hidden; background-position:bottom;
background-size:cover;}
.fqbox:before{position: absolute; content:''; inset:0; width:100%; height:100%; background: linear-gradient(137deg, rgb(7 32 58) 50%, rgb(77 77 86) 100%); opacity:.8;}
.fqbox .accordion-item{margin-bottom:20px; border-radius:20px; overflow: hidden; border:0; background:none;}
.fqbox .accordion-button{background:#0e1d2e; color:rgb(var(--color-white)); box-shadow:none; padding: clamp(20px, 4vw, 30px); font-weight:700;}
.fqbox .accordion-body{padding:10px 34px 34px; background:#0e1d2e; color:rgb(var(--color-white));}
.accordion .accordion-button:after {font-family: bootstrap-icons !important; content: "\F4FE"; float: right; color:rgb(var(--color-white)); font-weight:400; background:none;}
.accordion .accordion-button.collapsed:after {content: "\F63B";}

.faq-icon .accordion .accordion-button:after {margin-right: -10px;}

/*-------------- faqbox end -----------*/



.creditgirl{position: absolute; bottom:0; right:0; max-width:580px;}


.lineicon {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
}
.formicon {
  position: relative;
}
.lineicon i{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  margin-right: 13px;
}
.lineicon h5{font-size: clamp(16px, 4vw, 22px);}

.form-control, label {
  text-transform: uppercase;
}
.form-control {
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 40px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  color: #000;
}
textarea.form-control {
  height: 140px !important;
}
.popupform .form-control {
  border: 1px solid #00000038;
 
}

.popupform label{
  color: #fff;
}
.modal-header{border-bottom: 0!important;}
.btn-close{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(329deg) brightness(108%) contrast(102%);}
.modal-content{border:0!important;}
.modal-dialog .fqbox{border-radius:30px;}
.modal-dialog .fqbox:before{background: linear-gradient(310deg , rgb(42 88 136) 50%, rgb(202 221 255) 100%); opacity: .9;}

.call-section{color: yellow;}
.call-section a{color: yellow!important;}
.call-section a:hover{color: #fff!important;}


#comparison {
  width: 100%;
  padding-bottom:500px;
  overflow: hidden;
  position: relative;
}

figure {
  position: absolute;
  background-image: url(images/after.jpg);
  background-size: cover;
  font-size: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

#divisor {
  background-image: url(images/before.jpg);
  background-size: cover;
  position: absolute;
  width: 50%;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
  bottom: 0;
  height: 100%;
}

#handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
}

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  top: 50%;
  left: -25px;
  transform: translateY(-50%);
  background-color: transparent;
  width: calc(100% + 50px);
  z-index: 2;
}
input[type=range]:focus, input[type=range]:active {
  border: none;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 46px;
  width: 46px;
  background-image: url(images/slider.png);
}

input[type=range]::-moz-range-track {
  -moz-appearance: none;
  height: 15px;
  width: 100%;
  background-color: transparent;
  position: relative;
  outline: none;
}
.numberbox{background:rgb(var(--color-lightgrey)); padding:40px; border-radius:20px; display: flex; gap:30px;}
.numberbox h5{margin-bottom:10px; font-weight:700;}
.numberbox h3{background:#4a76ad; border-radius:100%; color:#fff; width:60px; height:60px; display: flex; justify-content: center; align-items: center; margin-bottom:0;}





section, .section{padding-bottom:5vw; padding-top:5vw;}






/*---------------Footer Start -----------------*/

.footer{font-size:16px; background:#1a2635; color:rgb(var(--color-white)); position:relative; margin-top:24px; line-height:24px;}
.footer:before{position: absolute; content:''; inset:0; background:url("images/shapeline.png") no-repeat; background-position:top right; background-size: cover; opacity:.1;}
.footer img{max-width:170px;}
.f-menu a{font-size:16px!important; display: block; text-align: start;}

.f-logo a{display: block; text-align: start;}
.f-menu-title{margin-left:42px;}
.footer a{color:#fff!important; margin:0 10px; font-size:18px;}
.footer a:hover{color:#c1c1c3 !important;}
.footerlast, .footerlast a{font-size:14px; font-weight:400;}
.social a{margin:0; font-size:18px; color:rgb(var(--color-white)); padding:5px; border-radius:100%; width:30px!important; height:30px!important;}
.social a:hover{color:#ccc;}



/*---------------Footer End -----------------*/


.fpdf{isolation: isolate;}
.fpdf:before{z-index: -1;}
.divider{
    margin: 1rem 0!important;
    color: inherit!important;
    border: 0!important;
    border-top: var(--bs-border-width) solid!important;
    opacity: .25!important;
}










.container{max-width:1230px; position:relative;}


@media (min-width:1400px){}
@media (max-width:1199.98px){.banner img{border-radius:0 0 40px 0;}}
@media (min-width:991px) {}
@media (max-width:991.98px){
	.btn-lg {font-size: 18px;padding: 8px 15px;}
	.testimonial .slick-slide{padding:80px;}
	.creditgirl{max-width: 400px;}
	.banner img{border-radius:0 0 30px 0;}
	.img-height{height:380px;}
}

@media (max-width:767.98px){
	.navbar-brand {max-width: 110px!important;}
	.shrink .navbar-brand{max-width: 110px!important;}
    .navbar-nav{line-height:30px;}
	.nav-item:last-child{border-bottom:0;}
	.nav-link{margin:0;}
	.nav-link::before{display:none;}
	.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{color: #ffcc00;}
	.navbar-toggler:focus{box-shadow:none;}.navbar-expand-lg .navbar-nav .nav-link{margin: 0;}
	.navbar-collapse{background-color:#fff; border-radius:0; position: absolute; top: 100px; width: 100%; left: 0;}
	.navbar-collapse .nav{display:block; line-height:44px; padding:20px 30px;}
	.navbar-expand-lg .navbar-nav .dropdown-menu{position:relative; top:inherit;}
	.videobox i{width:30px; height:30px; font-size:30px; padding:20px;}
	.creditgirl{display:none;}
	.list-1 li {margin-bottom: 30px;font-size: 14px;}
  .banner img {margin-bottom: 0;}
  .menu-bottom-section img {
    height: 100px;
    padding: 10px 0;
}
.navbar{padding: 0;}
.testimonial .bi.bi-chevron-right{right: 0;}
.testimonial .bi.bi-chevron-left{left: 0;}
.f-menu-title{margin-left:10px;}
.f-menu{padding-left: 10px;}
.inerbanner img {aspect-ratio: 2 / 1;object-fit: cover;}
#comparison {padding-bottom: 500px;}
.card-group{display:grid;}
.menu-bottom-section{position: sticky; width: 100%; z-index: 99; top:0;}
/*.inner-banner{height:100px;}*/
	
}

@media (max-width: 575.98px) {
	.banner h1{ font-size: 18px!important;}
	body{font-size:13px;}
	.btn{font-size:14px;}
	.btn-lg{font-size: 12px; padding:8px 10px;}
	.videobox i{width:40px; height:40px; font-size:50px; padding:40px;}
	.testimonial .bi.bi-caret-right {right: 35px;}
	.testimonial .bi.bi-caret-left {left: 35px;}
	.testimonial .slick-slide {padding: 40px;}
	.f-menu a {font-size: 13px !important;}
	.inerbanner img {aspect-ratio: 1 / 1;object-fit: cover;}
	     .card-group{       grid-template-columns: auto;}
	.pricing-card .list li {grid-template-columns: auto;
}
	
	
}

@media (max-width: 376.98px) {
	
	textarea.form-control{height:100px!important;} .testimonial .bi.bi-caret-right{right:40px;}
.testimonial .bi.bi-caret-left{left:40px;} .banner h1, .banner h2{font-size:14px!important;} .videobox i{width:30px; height:30px; font-size:30px; padding:20px;}

}


