@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');





:root {

    --font-family: 'Poppins', sans-serif;



    --pretitle-text: #5C5E77;

    --title-text: #000000 ;



    --cta-bg: #E80000;

    --cta-text: #ffffff;

	

	--cta-bg-hover: #E80000;

    --cta-text-hover: #ffffff;



    --coupon-bg: #FFFFFF;

    --coupon-text: #B7B7B7;



    --features-bg: #E80000;

    --features-text: #5C5E77;



    --footer-background: #f4f4f4;

    --footer-text: #5C5E77;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    margin-top: 5px;

    font-family: var(--font-family);



}





.cta-button {

    font-family: var(--font-family);

    color: var(--cta-text);

    background: var(--cta-bg);

    border: 2px solid var(--cta-bg);

    border-radius: 30px;

	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

	padding: 8px 20px;

}



.main .cta-button:hover {

    color: var(--cta-text-hover);

    background: var(--cta-bg-hover);

	border: 2px solid #ffffff;

}





body {

    background: var(--footer-background);

}











footer {

    color: var(--footer-text);

    background: var(--footer-background);

}







.main-box {

    




}





.main .hero-pretitle {

    color: var(--pretitle-text);

    

}



.main .hero-title {

    color: var(--title-text);

    

}



.modal-header {

    background: var(--cta-bg);

}



.btn-close {

    opacity: 1;

}



.modal-title {

    color: var(--cta-text);

}



.features h4 {

    color: var(--features-text);

    font-weight: bold;

	display: flex;

	justify-content: center;

	flex-direction: column;

	align-items: center;

}







.features .feature1,

.features .feature2,

.features .feature3 {

    line-height: 30px;

    border-radius: 50%;

    background: var(--features-bg);

    color: #ffffff;

    width: 40px;

    height: 40px;

    text-align: center;

    font-size: 25px;

    font-weight: bold;

    padding: 5px;

    float: left;

}



.coupon-code {

    border-color: var(--coupon-text);

    border-radius: 99px;

    color: var(--coupon-text);

    background: var(--coupon-bg);



}



.coupon-code-img {

   filter: hue-rotate(180deg) brightness(0.6); 

}



@media only screen and (min-width: 767px) {

	header .container{

		position: relative;

		top: 100px;

	}

}



@media only screen and (max-width: 767px) {

	.background-body {

		background-position-x: 25%!important;

	}

    .main-box {

        background: unset;

        box-shadow: unset;

    }



    .main .hero-title {

        text-shadow: unset;

    }



    .main .hero-pretitle {

        text-shadow: unset;

    }



}