@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lobster&display=swap');
/*font-family: 'Lato', sans-serif;
 font-family: "Lobster", sans-serif;
*/

.f-lato {font-family: 'Lato', sans-serif;}
.clr-blue {color: #1b3668}
.clr-black {color: #000;}

/*input field number remove spinner */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.container {max-width: 1140px;}

& header{
	& .logo
	{
		& img{
			@media (max-width: 1400px) {
				height: 32px;
				width: auto;
			}
			@media (max-width: 576px) {
				height: 28px;
				width: auto;
			}
		}
	}
}

.bt-landing-page{
	font-family: 'Lato', sans-serif;
	& .banner-wide{
		height: 510px;
		background: url(../images/banner-img.webp) no-repeat center;
		background-size: cover;
		display: flex;
		align-items: end;
		@media (max-width: 1080px) {
			height: 340px;
		}
		@media (max-width: 767px) {
			height: 280px;
		}
		@media (max-width: 576px) {
			height: 220px;
		}
		& h1{
			font-size: 60px;
			line-height: 62px;
			display: inline-block;
			padding-bottom: 72px;
			@media (max-width: 1080px) {
				font-size: 50px;
				line-height: 50px;
				padding-bottom: 30px;
			}
			@media (max-width: 767px) {
				font-size: 40px;
				line-height: 40px;
				padding-bottom: 20px;
			}
			@media (max-width: 576px) {
				font-size: 30px;
                line-height: 34px;
			}
			& strong{
				display: block;
				
			}
		}
	}
	& .detiald-content{
		padding-top: 54px;
		padding-right: 100px;
		padding-bottom: 54px;
		@media (max-width: 1080px) {
			padding-top: 30px;
			padding-right: 40px;
			padding-bottom: 30px;
		}
		@media (max-width: 767px) {
			padding-bottom: 20px;
		}
		@media (max-width: 576px) {
			padding-top: 20px;
            padding-right: 20px;
			padding-bottom: 10px;
		}

		& p{
            font-size: 24px;
            margin-bottom: 20px;
            font-weight: 300;
            line-height: 32px;
			@media (max-width: 1080px) {
				font-size: 22px;
				line-height: 30px;
			}
			@media (max-width: 576px) {
				font-size: 18px;
                line-height: 24px;
			}
		}
	}
	& .small-form{
		background: linear-gradient(to top, #838c93 0%, #5b6366 100%);;
		padding: 60px;
		border-radius: 0px;
		color: #ffff;
		position: relative;
		@media (max-width: 1080px) {
			padding: 30px 40px;
		}
		@media (max-width: 576px) {
			padding: 20px 20px;
		}
		& .tittle {
			position: relative;
			margin-bottom: 30px;
			& h3{
				font-size: 30px;
				line-height: 32px;
				font-weight: 600;
				@media (max-width: 576px) {
					font-size: 24px;
               		line-height: 28px;
				}
			}
			& h4{
				font-size: 18px;
				line-height: 20px;
				/* text-transform: uppercase; */
				margin-bottom: 0px;
				font-weight: 300;
				@media (max-width: 576px) {
					font-size: 17px;
					line-height: 19px;
				}
			}
			@media (max-width: 576px) {
				margin-bottom: 20px;
			}
		}
		& .input-group{
			margin-bottom: 20px;
			& label{
				font-size: 18px;
				line-height: 28px;
				margin-bottom: 10px;
			}
			& .form-control{
				width: 100%;
				padding: 10px;
				border-radius: 5px;
				border: 1px solid #b2b7b9;
				color: #ffff;
				font-size: 18px;
				line-height: 28px;
				background-color: transparent;
				box-shadow: none;
				&:invalid{
					background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%ff7a87' stroke='none'/%3e%3c/svg%3e);
				}
			}
			& .form-control::placeholder, .form-control::-webkit-input-placeholder{color: #fff;font-size: 14px; line-height: 14px;}
		
			& .submit-btn{
				background: #292c24;
				color: #fff;
				padding: 10px 20px;
				border: none;
				border-radius: 5px;
				font-size: 18px;
				line-height: 28px;
				box-shadow: none!important;
				border-radius: 10px;
				&:active{
					background-color: #3f4239;
				}
				@media (max-width: 576px) {
					font-size: 16px;
					line-height: 22px;
					border-radius: 6px;
				}
			}
			& .invalid-feedback{
				color: #ff7a87;
			}
		}
	}
	.service-sec{
		background-color: #e5e5e5;
		padding: 98px 0px;
		@media (max-width: 1080px) {
			padding: 30px 0px;
		}
		@media (max-width: 576px){
			padding: 20px 0px;
		}
		& .section-para{
			font-size: 26px;
			line-height: 30px;
			margin-top: 54px;
			font-weight: 300;
			@media (max-width: 1080px){
				font-size: 24px;
				line-height: 28px;
				margin-top: 40px;
			}
			@media (max-width: 768px){
				font-size: 22px;
				line-height: 26px;
				margin-top: 30px;
			}
			@media (max-width: 576px){
				font-size: 20px;
                line-height: 24px;
                margin-top: 24px;
                margin-right: 10px;
			}
		}
	}
	& .section-tittle{
		font-size: 50px;
		line-height: 56px;
		font-weight: 600;
		margin-bottom: 42px;
		@media (max-width: 1080px) {
			font-size: 36px;
			line-height: 40px;
			margin-bottom: 30px;
		}
		@media (max-width: 767px) {
			font-size: 36px;
			line-height: 40px;
			margin-bottom: 18px;
		}
		@media (max-width: 576px) {
			font-size: 26px;
            line-height: 32px;
		}
	}
	.cards{	
		display: grid;
		grid-template-columns:repeat(3, 1fr);
		gap: 38px;
		@media (max-width: 1080px) {
			gap: 20px;
		}
		@media (max-width: 767px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (max-width: 576px) {
			grid-template-columns: repeat(1, 1fr);
		}
		.card-item{
			display: grid;
			grid-template-rows: subgrid;
			background-color: #ffff;
			border-radius: 30px;
			position: relative;
			padding: 25px;
			grid-row: span 3;
			@media (max-width: 1080px) {
				padding: 20px;
			}
			@media (max-width: 767px) {
				border-radius: 20px;
			}
			@media (max-width: 576px) {
				border-radius: 10px;
			}
			& .card-img{
				height: 68px;
				width: 68px;
				margin-bottom: 0;
				position: relative;
				@media (max-width: 1080px) {
					height: 55px;
					width: 55px;
					/* margin-bottom: 20px; */
				}
				@media (max-width: 576px) {
					margin-bottom: 15px;
					height: 45px;
                	width: 45px;
				}
				& img{
					/* width: 100%;
					height: 100%;
					object-fit: contain; */
					position: relative;
					/* filter: invert(75%); */
				}
			}
			& .card-content{
				display: grid;
				grid-template-rows: subgrid;
				grid-row: span 4;
				row-gap: 20px;
				@media (max-width: 1080px) {
					row-gap: 15px;
				}
				@media (max-width: 576px) {
					row-gap: 10px;
				}
				& h3{
					font-size: 26px;
					line-height: 28px;
					font-weight: 800;
					margin-bottom: 0;
					align-self: end;
					@media (max-width: 1080px) {
						font-size: 22px;
						line-height: 24px;
					}
					@media (max-width: 576px) {
						font-size: 20px;
                        line-height: 22px;
					}
				}
				& p{
					font-size: 22px;
					line-height: 24px;
					font-weight: 300;
					@media (max-width: 1080px) {
						font-size: 18px;
						line-height: 20px;
						font-weight: 400;
					}
				}
			}
		}
	}
	& .ribbon-sec{
		padding: 46px 0px;
		.btn-group{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			column-gap: 100px;
			& a.simple-btn{
				flex: 0 1 350px;
				background-color: #292c24;
				color: #fff;
				font-size: 25px;
				text-transform: uppercase;
				border-radius: 20px;
				text-decoration: none;
				cursor: pointer;
				@media (max-width: 1080px){
					flex: 0 1 280px;
                    font-size: 21px;
                    border-radius: 12px;
				}
				@media (max-width: 767px){
					flex: 0 1 280px;
					font-size: 21px;
				}
				@media (max-width: 576px){
					flex: 0 1 250px;
                    font-size: 18px;
                    border-radius: 6px;
				}
			}
			@media (max-width: 1080px) {
				row-gap: 20px;
				column-gap: 40px;
			}
			@media (max-width: 576px) {
				row-gap: 10px;
			}
		}
		& hr{
			margin: 50px 0px;
			@media (max-width: 1080px){
				margin: 30px 0px;
			}
			@media (max-width: 767px){
				margin: 30px 0px;
			}
			@media (max-width: 576px){
				margin: 15px 0px;
			}
		}
		& .ribbon-tittle{
			font-size: 54px;
			line-height: 56px;
			color: #000;
			text-align: center;
			font-weight: 600;
			@media (max-width: 1080px){
				font-size: 44px;
				line-height: 50px;
			}
			@media (max-width: 767px){
				font-size: 34px;
            	line-height: 42px;
			}
			@media (max-width: 576px){
				font-size:24px;
            	line-height: 28px;
			}
		}
		& .fancy-text{
			font-family: "Lobster", sans-serif;
			font-size: 126px;
			line-height: 128px;
			color: #00c000;
			text-align: center;
			@media (max-width: 1080px){
				font-size: 90px;
            	line-height: 96px;
			}
			@media (max-width: 767px){
				font-size: 80px;
            	line-height: 100px;
			}
			@media (max-width: 576px){
				font-size: 60px;
            	line-height: 80px;
			}
		}
		@media (max-width: 1080px){
			padding: 35px 0px;
		}
		@media (max-width: 767px){
			padding: 28px 0px;
		}
		@media (max-width: 576px){
			padding: 20px 0px;
		}
	}
	& footer{
		padding: 54px 0px;
		background-color: #1a3668;
		color: #ffff;
		text-align: center;
		& address{
			display: flex;
			flex-wrap: wrap;
			row-gap: 10px;
			@media (max-width: 767px){
				margin-bottom: 2rem;
			}
			@media (max-width: 576px){
				margin-bottom: 1.5rem;
			}
		}
		& .footer-label{
			display: block;
			width: 100%;
			font-size: 18px;
			line-height: 20px;
			text-align: center;
			@media (max-width: 576px){
				text-align: center !important;
				font-size: 16px;
				line-height: 18px;
			}
		}
		& a{
			display: block;
			width: 100%;
			font-size: 22px;
			line-height: 24px;
			text-decoration: none;
			text-align: center;
			color: #ffff;
			@media (max-width: 576px){
				font-size: 18px;
				line-height: 20px;
			}
		}
		& .footer-copyright{
			position: relative;
			display: block;
			text-align: center;
			width: 100%;
			margin-top: 54px;
			& p{
				font-size: 16px;
				line-height: 18px;
				display: block;
				@media (max-width: 1080px){
					margin-bottom: 0;
				}
			}
			@media (max-width: 1080px){
				margin-top: 30px;
			}
			@media (max-width: 767px){
				margin-top: 30px;
			}
		}
		@media (max-width: 1080px){
			padding: 20px 0px;
		}
		@media (max-width: 767px){
			padding: 30px 0px;
		}
		@media (max-width: 767px){
			padding: 20px 0px;
		}
	}
}

/*----------- thank-you page css --------------*/

.thank-you {display: flex;align-items: center;justify-content: center;height: 100vh;width: 100%;}
.thank-you h1 {font-weight: 800; font-size: 70px; margin: 0px;}
.thank-you p {font-size: 20px;margin: 0 0 10px;font-weight: 400;}
.thank-you .style-icon {display: block;font-size: 80px;margin: 25px 0;}
.thank-you .btns { background: #ff9829;text-decoration: none;color: #fff;font-size: 20px;font-weight: 700;height: 45px;width: 200px;
	margin: 0 auto;border-radius: 6px;text-transform: uppercase;display: flex;align-items: center;justify-content: center;border: 0;}


@media(max-width: 1500px) {
	.thank-you h1 {
        font-size: 56px;
    }
	.thank-you .style-icon {
        font-size: 70px;
        margin: 20px 0;
    }
	.thank-you .btns {
        font-size: 18px;
        height: 40px;
        width: 170px;
    }
}

@media (max-width: 1200px) {
	.thank-you h1 {
		font-size: 50px;
	}
}

@media (max-width: 767px) {
	.thank-you h1 {
		font-size: 32px;
		margin: 0 0 5px;
	}
	.thank-you p {
		font-size: 18px;
		line-height: 22px;
	}
	.thank-you .style-icon {
		font-size: 55px;
		margin: 15px 0;
	}
	.thank-you .btns {
		font-size: 16px;
		height: 36px;
		width: 130px;
	}
}