@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&display=swap');

body{margin:0}
a.get-btn {height: auto; text-decoration: none; background-color: #ff4f00; display: inline-block; vertical-align: middle; width: auto; max-width: 100%; padding: 15px 90px; font-weight: 900; text-align: center; color: #fff; cursor: pointer; border-radius: 100px; transition: transform .3s ease-in-out; box-shadow: 0px 2px 4px rgb(0 0 0 / 50%); }
a.get-btn:hover, a.get-btn:focus {background-color: #ff4f00; }

/*BANNER CSS START*/
.banner-section {position: relative; padding: 0px 0px 100px 0px;height:auto; }
.banner-section::before {position: absolute; content: " "; left: 0; right: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0.4; }
.banner-text {position: relative; font-size: 0; }
.banner-section .logo {margin-bottom: 100px; padding: 20px 7% 0px 7%; }
.logo a {display: inline-block; vertical-align: middle; width: 20%;}
.logo h2 {float:right;font-size: 26px; display: inline-block; width: 50%; vertical-align: middle; text-align: center; font-family: 'Lato', sans-serif; color: rgba(32,21,21,1); max-width: 300px; }
.logo h2 span {display: block; font-size: 17px; font-family: 'Lato', sans-serif; font-weight: normal; }
.logo h2 span b {color: #fb728a; font-size: 24px; vertical-align: middle; position: relative; top: -2px; }
.banner-section .logo img {max-width: 125px; }
.banner-text .b-box {display: inline-block; width: 50%; padding: 0 30px; box-sizing: border-box; vertical-align: middle; }
.banner-text .b-box.left-box {padding-right: 0; padding-left: 7%; }
.banner-text .left-box h1 {font-size: 52px; vertical-align: middle; font-family: 'Lato', sans-serif; font-weight: bold; margin: 0; }
.banner-text .left-box h1 {font-size: 52px; vertical-align: middle; font-family: 'Lato', sans-serif; font-weight: bold; margin: 0; }
.banner-text .right-box{text-align: center;}
.get-btn h4 {color: #fff; font-size: 1rem; margin: 10px 0 8px 0;font-family: 'Lato', sans-serif;font-weight: 700; }
.get-btn p {color: #fff; font-size: 1.5rem; margin: 0; font-family: 'Lato', sans-serif; font-weight: 700; }
.btn-title {font-size: 1.2rem; font-family: 'Lato', sans-serif; margin: 20px auto auto auto; }
h1 {
   background: linear-gradient(to right, #7928ca, #ff0080);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*BOX SECTION CSS START*/
section.box-section {position:relative;padding: 70px 0 90px 0; background-image: url(../img/cta-bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.box-section h2 {font-size: 34px; text-align: center; font-family: 'Lato', sans-serif; color: #ffffff; margin: 0; padding: 0 10%; font-weight: normal; line-height: 46px; }
.box-section h2 b {font-weight: 900; }
.box-section .boxs {text-align: center; font-size: 0; margin-top: 50px; display: flex; justify-content: center; }
.box-section .box {background-color: #fff; border-radius: 7px; width: 100%; max-width: 350px; display: inline-block; margin: 0 7px; text-align: center; vertical-align: top; padding: 45px 28px; box-sizing: border-box;transition: 0.3s ease all;}
.box-section .box h3 {font-family: 'Lato', sans-serif; font-size: 20px; margin: 0; font-weight: normal; color: #333333; transition: 0.3s ease all; }
.box-section p {font-size: 30px; text-align: center; font-family: 'Lato', sans-serif; color: #ffffff;}
.box-section .box:hover {background-color: #ff4f00;}
.box-section .box:hover h3{color:#fff;}

/*FOOTER CSS START*/
footer {background-color: #1e2530; padding: 70px 0; text-align: center; }
footer h2 {color: #fff; font-family: 'Lato', sans-serif; font-size: 34px; margin: 0 0 60px 0; }
footer .copy{color:white;font-family: 'Lato', sans-serif;}


/*================*/
/*MEDIA CSS START*/

@media (min-width: 768px) and (max-width: 991px){
	.banner-section {padding: 0 0 70px 0; height: auto; }
	.banner-section .logo {margin-bottom: 50px; }
	.banner-text .b-box.left-box {padding-right: 7%; padding-left: 7%; }
	.logo a{width:54%;}
	.banner-text .b-box {width: 100%;}
	.banner-text .right-box {text-align: center; margin-top: 50px; }
	.box-section h2 {font-size: 32px;}
	.box-section .boxs {display: flex; margin-top: 0; }
	.box-section .box {display: block; margin: 30px 20px 0 20px; max-width: 80%; }
	footer {padding: 70px 50px; }
}

@media (max-width: 767px){
	.banner-section {padding: 0 0 50px 0; height: auto; }
	.banner-section .logo {margin-bottom: 60px; padding: 10px 20px 0px 20px; }
	.banner-section .logo img {max-width: 130px; }
	.logo a {width: auto; }
	.logo h2 {font-size: 16px; display: inline-block; width: 70%; vertical-align: middle; text-align: center; font-family: 'Lato', sans-serif; color: #5a5a5a; max-width: fit-content; float: right; margin: 22px 0 0 0; }
	.banner-text .b-box {width: 100%;}
	.banner-text .b-box.left-box {padding-right: 20px; padding-left: 20px; }
	.banner-text .left-box h1 {font-size: 38px;line-height: 40px;}
	.banner-text .right-box {text-align: center; margin-top: 35px; }
	.get-btn h4 {font-size: 19px;}
	.get-btn p {font-size: 1.25rem; font-weight: 900;}
    a.get-btn {padding: 20px 12%;}
	section.box-section {padding: 50px 0 60px 0;}
	.box-section h2 {font-size: 24px; padding: 0 5%; line-height: 35px; }
	.box-section .boxs {display: block; margin-top: 0; }
	.box-section .box {display: block; margin: 30px auto 0 auto; max-width: 80%; }
	.box-section p {padding: 0 15px;font-size: 24px; }
	footer {padding: 40px 15px; }
	footer h2 {font-size: 24px; margin: 0 0 40px 0; }
}