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



:root{
	--primary: hsla(181, 94%, 13%, 100%);
	--primary_lighter: hsla(181, 94%, 70%, 100%);
	--primary_lightest: hsla(181, 94%, 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: "Syne", sans-serif;
	--para: "Afacad", 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); font-size: 18px; }
a{ text-decoration: none; color: inherit; }
h1{font-family: var(--heading); font-size: 80px; line-height: 100px; padding: 32px 0px; font-weight: 700; }
h3{font-family: var(--heading); font-size: 80px;}
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; font-size: 18px; }
section{ position: relative; margin-bottom: 120px; }

.image_wrapper{width: 100%; display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.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: 20px 0px; }
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); transition: var(--effect); }
header .bttn i{ color: var(--white); padding-left: 6px; }
header .bttn:hover{ background-color: var(--secondary); }
header .mail{ display: flex; align-items: center; gap: 8px; }
header .mail span{ height: 32px; width: 32px; background-color: var(--primary); position: relative; display: inline-block; }
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: 45%; }
.banner h1{ text-align: center; color: #7d7d7d; position: absolute; z-index: 1; top: 100px; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0; }

.img_content .images_holder{ position: relative; height: 118%; }
.img_content .images_holder > .row > div:nth-child(2){ position: absolute; right: 0; top: 150px; }
.img_content .images_holder > .row > div:nth-child(1) .image_wrapper:before{ padding-top: 97%; }
.img_content .images_holder > .row > div:nth-child(2) .image_wrapper:before{ padding-top: 158%; }

.ic_content > img{ width: 100%; height: auto; margin-bottom: 10px; }
.ic_content span img{ max-width: 32px; height: auto; margin-right: 8px; filter: brightness(0) saturate(100%) invert(15%) sepia(77%) saturate(794%) hue-rotate(139deg) brightness(100%) contrast(98%); }
.ic_content ul{ padding-left: 0; margin: 60px 0px; }
.ic_content ul li{ list-style-type: none; font-size: 32px; }
.ic_content ul li:not(:last-child){ margin-bottom: 24px; }
.ic_content a.bttn{ background-color: var(--primary); color: var(--white); }
.ic_content a.bttn i{ color: var(--white); padding-left: 6px; }

.bg_white{ background-color: var(--white); padding: 120px 0px; margin-bottom: 0; }
.bg_white p{ background-color: var(--primary); color: var(--primary_lightest); border: 1px solid var(--primary_lighter); padding: 8px 24px; display: inline-block; }
.section_bg_item{ padding: 100px 0px; background-position: center; background-repeat: no-repeat; background-size: cover; margin-top: 200px; margin-bottom: 120px; }
.section_bg_item p{ font-size: 16px; font-weight: 600; padding: 6px 20px; background-color: var(--primary_lightest); color: var(--primary); border: 1px solid var(--primary_lighter); font-family: var(--heading); display: inline-block; }
.single_image .image_wrapper:before{ padding-top: 121%; }
.ic_content.single_item li{ display: flex; align-items: center; }
.ic_content.single_item li, .ic_content.single_item li *, .ic_content.single_item h3{ color: var(--white); }
.ic_content.single_item li span{ position: relative; height: 60px; width: 60px; background-color: var(--primary_lighter); margin-right: 12px; display: inline-block; }
.ic_content.single_item li span img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.single_image img{ filter: drop-shadow(4px -4px 4px rgba(0,0,0,0.7)); }

.sb_image .image_wrapper:before{ padding-top: 64%; }
.sbi_box{ padding: 0px 32px; }
.sbi_box .ic_content{ margin-top: -40px; position: relative; padding: 0px 32px; box-sizing: border-box; }
.sbi_box .ic_content h3{ font-size: 60px; }

footer{ background-color: var(--primary); padding: 32px 0px; }
footer *{ color: var(--white); }
footer img{ max-width: 240px; width: 100%; height: auto; filter: brightness(5) invert(0) grayscale(1) sepia(1) hue-rotate(180deg); }
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: 60px; margin-top: 12px; }
	header .mail{ justify-content: center; }
	header .main_logo img{ margin: 0px; max-width: 180px; width: 100%; height: auto; }
	header .row > div:last-child{ text-align: center; }

	h3{font-size: 36px; font-weight: 600;}
	section{ margin-bottom: 60px; }
	.banner h1{ position: relative; font-size: 30px; line-height: 34px; padding: 0; color: var(--primary); top: 0; left: 0; transform: translate(0); font-weight: 600; }
	.img_content .images_holder > .row > div:nth-child(2){ position: relative; top: 0; }
	.ic_content ul li { list-style-type: none; font-size: 20px; }
	.ic_content ul{ margin: 20px 0px; }
	.ic_content ul li:not(:last-child){ margin-bottom: 18px; }
	.ic_content a.bttn{ margin-top: 20px; }
	.ic_content{ margin-top: -20px; position: relative; }
	.section_bg_item{ margin: 60px 0px; }

	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) {}