@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Pacifico&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');

/*font-family: "Figtree", sans-serif;*/
/*font-family: "Pacifico", cursive;*/

:root{
	--primary: hsla(150, 93%, 17%, 100%);
	--primary_lighter: hsla(150, 93%, 70%, 100%);
	--primary_lightest: hsla(150, 93%, 98%, 100%);
	--secondary: hsla(35, 100%, 55%, 100%);
	--secondary_lighter: hsla(35, 100%, 70%, 100%);
	--secondary_lightest: hsla(35, 100%, 95%, 100%);
	--black: hsla(0, 0%, 11%, 100%);
	--black_lighter: hsla(0, 0%, 30%, 100%);
	--white: hsla(0, 0%, 100%, 100%);
	--white_lighter: hsla(0, 0%, 95%, 100%);
	--heading: "Pacifico", cursive;
	--para: "Figtree", sans-serif;
	--effect: all ease-in-out 350ms;
}

body{ background-color: var(--primary_lightest); }
.green{ color: var(--primary); }
*{ font-family: var(--para); color: var(--black); }
a{ text-decoration: none; color: inherit; }
h1{font-family: var(--heading); font-size: 80px; line-height: 100px; padding: 32px 0px; }
h3{font-family: var(--heading); font-size: 40px;}
h5{ font-size: 20px; }
h5 img{ max-width: 30px; width: 100%; height: auto; margin-right: 8px; }
* span{ font-family: inherit; font-size: inherit; line-height: inherit; }
.bttn{ display: inline-block; text-transform: capitalize; padding: 12px 24px; border: 18px; }

.image_wrapper{width: 100%; display: inline-block; position: relative; overflow: hidden; vertical-align: top; border-radius: 10px;}
.image_wrapper:before{content: ""; display: block; padding-top: 100%;}
.image_wrapper img{width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

header{ margin-bottom: 80px; margin-top: 20px; }
header .main_logo{ text-align: center; }
header .main_logo img{ max-width: 300px; width: 100%; height: auto; }
header .bttn{ background-color: var(--primary); color: var(--white); border-radius: 18px; transition: var(--effect); }
header .bttn:hover{ background-color: var(--secondary); }
header .mail{ display: flex; align-items: center; gap: 8px; }
header .mail span{ height: 32px; width: 32px; border-radius: 8px; background-color: var(--primary); position: relative; display: inline-block; border-radius: 12px; }
header .mail span i{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--white); font-size: 14px; }

.banner .image_wrapper:before { padding-top: 95%; }

.devider{ background-position: center; background-repeat: repeat-x; background-size: contain; height: 40px; margin: 100px 0px; }

.products{ margin-bottom: 2px; }
.products h3{ margin-bottom: 40px; color: var(--primary); }
.product_box{ background-color: var(--primary); border-radius: 20px; overflow: hidden; margin-bottom: 32px; }
.product_box p{ font-size: 20px; font-weight: 500; color: var(--white); padding: 20px 0px; margin-bottom: 0; text-transform: capitalize; }
.product_box .image_wrapper:before { padding-top: 70%; }

.brand img{ width: 100%; height: auto; filter: invert(23%) sepia(10%) saturate(4831%) hue-rotate(104deg) brightness(99%) contrast(98%) drop-shadow(2px 4px 1px black); opacity: 5%; margin-top: -20px; position: relative; z-index: -1; }

footer{ background-color: var(--primary); padding: 32px 0px; margin-top: -40px; }
footer *{ color: var(--white); }
footer img{ max-width: 240px; width: 100%; height: auto; }
footer p strong{ font-size: 18px; font-weight: 500; color: var(--white); text-align: right; }
footer p span{ font-size: 14px; font-weight: 300; text-align: center; }
footer p span a{ font-weight: 800; font-size: 14px; }


/* CSS for Mobile Version */

/*@media only screen and (max-width: 600px) {...}
@media only screen and (min-width: 600px) {...}
@media only screen and (min-width: 768px) {...}
@media only screen and (min-width: 992px) {...}
@media only screen and (min-width: 1200px) {...}*/

@media only screen and (max-width: 500px){
	header{ margin-bottom: 50px; margin-top: 12px; }
	header .mail{ justify-content: center; }
	header .main_logo img{ margin: 20px 0px; max-width: 180px; width: 100%; height: auto; }
	header .row > div:last-child{ text-align: center; }
	h1{ font-size: 54px; line-height: 72px; padding: 0; }
	.banner_content{ text-align: center; }
	.devider{ margin: 50px 0px; height: 20px; }
	.product_box p{ font-size: 16px; padding: 12px 0px; }
	.products{ margin-bottom: -3px; }
	.products .row{ justify-content: center; }
	footer{ margin-top: -8px; }
	footer .row > div:first-child, footer .row > div:last-child{ text-align: center!important; }
	footer p{ margin-bottom: 0; }
	footer .row > div:nth-child(2){ margin: 20px 0px; }
}
@media only screen and (min-device-width: 601px) and (max-device-width: 767px) {}
@media only screen and (min-device-width: 769px) and (max-device-width: 991px) {}
@media only screen and (min-device-width: 992px) and (max-device-width: 1200px) {}
@media only screen and (min-device-width: 1201px) and (max-device-width: 1399px) {}