@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
* {
    font-family: Inter;
}

.container {
    width: 1170px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.header{
    height: 70px;
}

.logo {
    float: left;
    width: 87px;
    margin-right: 16px;
}
.companyname {
    float: left;
    width: 450px;
    margin-right: 10px;
}
.l1{
	font-family: Inter;
	font-style: normal;
	font-weight: bold;
	font-size: 24px;
	line-height: 29px;
	color: #38A3EE;
    padding-bottom: 3px;	
}
.l2{
	font-family: Inter;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 19px;
	color: #031421;

}

.phone {
    float: right;
    width: 210px;
    margin-right: 10px;
	font-family: Inter;
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 29px;
	/* identical to box height */

	font-feature-settings: 'pnum' on, 'lnum' on;

	color: #000000;
	padding-top: 5px;
}

.main {
    padding-top: 50px;
}
.head1{
	font-family: Inter;
	font-style: normal;
	font-weight: 500;
	font-size: 40px;
	line-height: 48px;
    padding-bottom: 5px;	
	color: #000000;

}
.suphead1{
	font-family: Inter;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 22px;
	/* identical to box height */


	color: #000000;

}

.offerblock{
	display: block;
	margin-top:40px;
	width: 1170px;
	height: 580px;
	background: #FAFDFF;
	box-shadow: 0px 11.7037px 35.1111px rgba(122, 122, 122, 0.4);
	border-radius: 23.4074px;
	margin-bottom: 100px;
}

.oleft{
	padding: 53px 0px 0px 48px;
	float: left;
	width: 63%;
}
.l3{
	font-family: Inter;
	font-style: normal;
	font-weight: 500;
	font-size: 26px;
	line-height: 31px;

	color: #000000;}
.l3 > ul {
	font-family: Inter;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 22px;
	list-style-type: none;
	padding-inline-start: 0px;	
}
.li3:before{
	content: url('img/check.png');
	padding-right: 15px;

}
.li3{
	padding-bottom: 20px;
}
.poffer{
	font-family: Inter;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 24px;
color: #000000;
    margin-top: 30px;
}
.l4 > ul {
	font-family: Inter;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 22px;
	list-style-type: none;
	padding-inline-start: 0px;	
}
.l4{padding-left: 0px;}
.li4:before{
	content: url('img/ellipse.png');
	padding-right: 25px;

}
.li4{
	padding-bottom: 20px;
}
.oright{
	float: right;
    background: #C7E5FA;
    border-radius: 0px 15px 15px 0px;
    height: 100%;
    width: 32%;
}
.oright > p{
	text-align: center;
    font-size: 12px;
    line-height: 14px;
    padding-left: 15px;
    padding-right: 15px;
    color: #9c9c9c;
}
.orhead{
	font-family: Inter;
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 30px;
	padding-top: 50px;

	text-align: center;

	/* black */

	color: #031421;

}

.bblock{
	width: 630px;
    
    padding: 24px 40px;
    
   
    text-align: center;

   	background: #138DE2;
	box-shadow: 0px 11.7037px 35.1111px rgba(122, 122, 122, 0.2);
	border-radius: 20px;
	font-family: Inter;
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	color: #FAFDFF;

}



@media screen and (max-width: 1170px){
	.container {
    	width: 960px;
    }
    .phone{
    	margin-right: 60px;
    }
    .head1{
    	font-size:34px;
    	padding-left: 20px;
    }
    .offerblock{
    	width: 960px;
    }
    .oleft {
    	padding: 48px 0px 0px 30px;
	}
	.orhead{
		font-size: 16px;
	    line-height: 24px;
	}
	.l3{
		font-size: 24px;
	}
	.l3 > ul{
		font-size: 16px;
	}
	.li3 {
    	padding-bottom: 12px;
	}
	.main {
    	padding-top: 20px;
	}
	.l4 > ul{
		font-size: 15px;
	}
	.li4 {
    	padding-bottom: 5px;
	}
	.bblock {
 	    width: 500px;
   		font-size: 16px;
   		line-height: 26px;
    	padding: 8px 18px;
	}
	.offerblock{
		height: 490px;
	    margin-top: 15px;
	}
	.suphead1 {
		padding-left: 20px;
	}
	.logo{
		padding-left: 15px;
	}
	.l1{
		font-size: 16px;
    	line-height: 24px;
	}
	.l2{
		font-size: 14px;
	}
}
@media screen and (max-width: 1024px){
	.container {
    	width: 740px;
    	padding-left: 0px; 
    	padding-right: 0px;
    }
    .phone{
    	font-size: 20px;
    	line-height: 40px;
    }
    .companyname{
    	width: 400px;
    }
    .head1{font-size: 28px;}
    .suphead1{padding-right: 20px;}
    .phone{
    	margin-right: 15px;
    text-align: right;
        width: 180px;
    }
    .oleft{float:none;}
    .oright{float:none;} 
    .offerblock {
    	width: 740px;
	}
	.oleft {
    	width: 90%;
	}
	.poffer {
		margin-top: 70px;
	}
	.offerblock {
    	height: 540px;
    	margin-top: 40px;
	}
	.bblock{
		margin-top: 40px;
	    padding: 8px 30px;
	    width: 450px;
	    margin-left: auto;
	    margin-right: auto;

	}
	.oright{
		border-radius: 15px 15px 15px 15px;
	    height: 100%;
	    width: 100%;
	    margin-top: 50px;
	}
	.oright > p{
		font-size: 16px;
	    line-height: 20px;
	    padding-left: 25px;
	    padding-right: 25px;
	}
}

@media screen and (max-width: 775px){
	.container {
    	width: 100%;
    }
    .phone {
	    text-align: center;
	    width: 100%;
	    color: #38a3ee;
	    float: none;
	}
	.companyname {
	    width: 100%;
	    text-align: center;
	    float:none;
	}
	.logo{
		margin-left: auto;
	    margin-right: auto;
	    margin-bottom: 10px;
	    float:none;
	    width: 100px;
	}	
	.main{
		padding-top: 150px;
	}
	.head1 {
	    font-size: 30px;
	    line-height: 36px;
	    padding-bottom: 20px;
	}
	.offerblock{
		width: 100%;
		height: auto;
	}
	.bblock{
		width: 80%;
		line-height: 26px;
	}
	.oright{
		border-radius: 0px 0px 15px 15px;
		padding-bottom: 25px;
	}
	.orhead{
		font-size: 18px;
	}
}