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

/*font-family: "Jost", sans-serif;*/

:root{
	--primary_dark: hsla(358, 66%, 20%, 100%);
	--primary: hsla(358, 66%, 45%, 100%);
	--primary_lighter: hsla(358, 66%, 70%, 100%);
	--primary_lightest: hsla(358, 66%, 96%, 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%);
	--font: "Jost", sans-serif;
	/* --heading: "Pacifico", cursive;
	--para: "Figtree", sans-serif; */
	--effect: all ease-in-out 350ms;
}

body{}
.red{ color: var(--primary); }
.bg_red{ background-color: var(--primary); }
.white{ color: var(--white); }
*{ font-family: var(--font); color: var(--black); }
a{ text-decoration: none; color: inherit; }
h1{font-family: var(--font); font-size: 80px; line-height: 100px; padding: 32px 0px; text-transform: capitalize; }
h3{font-family: var(--font); 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; }
.bttn i{ margin-left: 8px; transition: var(--effect); }

.bttn.bg_red.white:hover i{ margin-left: 12px; }

.image_wrapper{width: 100%; display: inline-block; position: relative; overflow: hidden; vertical-align: top; border-radius: 0px;}
.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; mix-blend-mode: multiply; }
header .bttn{ background-color: var(--primary); color: var(--white); border-radius: 0px; 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: 0px; background-color: var(--primary); position: relative; display: inline-block; border-radius: 0px; }
header .mail span i{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--white); font-size: 14px; }

.banner_content h1{ padding: 0; }
.banner_content > *:not(:last-child){ margin-bottom: 20px; }
.banner .image_wrapper:before{ padding-top: 65%; }

.vtabber{ padding: 100px 0px; }
.vtabber .nav-pills .nav-link.active, .vtabber .nav-pills .show > .nav-link{ color: var(--primary); background-color: var(--primary_lightest); }
.vtabber .nav-pills .nav-link{ color: var(--primary); font-size: 24px; text-align: left; padding: 20px; }
.vtabber h1{ font-size: 60px; font-weight: 600; padding-top: 0; }
.vtabber h1 span{ color: var(--primary); display: block; line-height: 60px; }
.vt_item_box{ margin-bottom: 32px; }
.vt_item_box .image_wrapper:before{ padding-top: 138%; }
.vt_item_box h5{ font-weight: 400; font-size: 24px;	text-align: center; margin-top: 20px; }

.vtab-scroll { scroll-behavior: smooth; }
.vtab-scroll { overflow-x: auto; overflow-y: hidden; white-space: nowrap; flex-wrap: nowrap; gap: 10px; }
.vtab-scroll .nav-link { flex: 0 0 auto; white-space: normal; }
.vtab-scroll::-webkit-scrollbar { display: none; }
.vtab-scroll { -ms-overflow-style: none; scrollbar-width: none; }
@media (min-width: 992px) { .vtab-scroll { overflow: visible; flex-wrap: wrap; } }


footer{ background-color: var(--primary); padding: 32px 0px; margin-top: 0px; }
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; }
footer img{ mix-blend-mode: screen; filter: invert(1) brightness(1) grayscale(5); }


/* 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; }
	.vtab-scroll{ margin: 40px 0px; }
	.vtabber .nav-pills .nav-link{ font-size: 18px; padding: 10px; }
	.vtabber h1{ text-align: center; }
	.vtab-scroll .nav-link { white-space: no-wrap; }
	.vt_item_box h5{ font-size: 18px; margin-top: 12px; }
}
@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) {}