@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
/*font-family: "Figtree", sans-serif;*/

:root{
	--white: #ffffff;
	--black: hsla(0, 0%, 11%, 100%);
	--pColor: hsla(0, 100%, 37%, 100%);
	--lightest_pColor: hsla(0, 100%, 96%, 100%);
	--lighter_pColor: hsla(0, 100%, 70%, 100%);
	--dark_pColor: hsla(0, 100%, 14%, 100%);
	--offWhite: hsla(0, 0%, 97.5%, 100%);
	--offBlack: hsla(0, 0%, 55%, 100%);
	--font: "Figtree", sans-serif;
	--effect: all ease-in-out 350ms;
}

*{ font-family: "Figtree", sans-serif; bottom: 0; margin: 0; padding: 0; color: var(--black); }
a{ text-decoration: none; }
p{ font-size: 16px; }
h1{ font-size: 72px; font-weight: 700; }
h2{ font-size: 40px; font-weight: 600; color: var(--pColor); }
h3{ font-size: 24px; }
h4{ font-size: 20px; }
h5{ font-size: 18px; }
h6{ font-size: 14px; }
.bttn{ padding: 12px 20px; display: inline-block; background-color: var(--pColor); color: var(--white); text-transform: uppercase; transition: var(--effect); }
.bttn:hover{ background-color: var(--dark_pColor); color: var(--white); }
.image_wrapper { width: 100%; display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.image_wrapper:before { content: ""; padding-top: 65%; display: block; }
.image_wrapper img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 100%; height: auto; }

.site-header{ background:transparent; }
.navbar{ padding:10px 0; }
.navbar-brand img{ max-width: 140px; width: 100%; height: auto; }
.navbar-nav .nav-link{ color: var(--black); font-weight:400; margin:0 12px; position:relative; transition:.3s; font-size: 18px; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{ color: var(--pColor); }
.navbar-nav .nav-link.active:not(.btn)::after,
.navbar-nav .nav-link:not(.btn)::after{ content:""; position:absolute; width:0; height:0.5px; left:50%; bottom:-5px; background: var(--pColor); transition:.35s; transform:translateX(-50%); }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{ width:100%; }
.btn-contact{ background: var(--pColor); color:#fff !important; padding:12px 20px !important; border-radius:0px; margin-left:18px; transition:.3s; font-weight:600; }
.btn-contact:hover{ background:#970000; color:#fff; transform:translateY(-2px); }
.navbar-toggler{ border:none; padding:0; width:48px; height:48px; border-radius:50%; background:#f4f4f4; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 15px rgba(0,0,0,.08); }
.navbar-toggler:focus{ box-shadow:none; }
.menu-icon{ width:24px; height:18px; position:relative; }
.menu-icon span{ position:absolute; width:100%; height:2.5px; background:#111; left:0; transition:.35s; border-radius:20px; }
.menu-icon span:nth-child(1){ top:0; }
.menu-icon span:nth-child(2){ top:7px; width:75%; }
.menu-icon span:nth-child(3){ bottom:0; }
.navbar-toggler:hover .menu-icon span:nth-child(2){ width:100%; }
.offcanvas{ width:300px; }
.offcanvas-header{ border-bottom:1px solid #ececec; }
.offcanvas-title{ font-weight:700; }
.offcanvas .nav-link{ font-size:18px; padding:12px 0; color: var(--black); }
.offcanvas .btn-contact{ width:100%; text-align:center; margin:15px 0 0; }

.banner{ margin-top: 100px; }
.inner_banner .banner_content{ position: relative; z-index: 1; }
.banner_content h1{ margin: 28px 0px; line-height: 76px; }
.banner_content h1 span{ color: var(--pColor); }
.banner_content h5{ text-transform: capitalize; font-weight: 500; color: var(--pColor); background-color: var(--lightest_pColor); display: inline-block; padding: 10px; }
.banner_content p{ font-size: 18px; }
.banner_content h5, .banner_content p{ margin-bottom: 0; }
.banner_content .bttn{ margin-top: 28px; }
.banner_images .image_wrapper:before{ padding-top: 162%; }
.banner_images .row > div:nth-child(2){ margin-top: 20%; }
.inner_banner .banner_content h1{ font-size: 46px; color: var(--white); }
.inner_banner .banner_content h1 span{ color: var(--lighter_pColor); }
.inner_banner{ background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; padding: 100px 0px; }
.inner_banner:before{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #000000; opacity: 60%; z-index: 0; }

.sales_services{ margin-top: 100px; padding: 80px 0px; background-color: var(--offWhite); }
.serv_box .icon img{ max-height: 80px; height: 100%; width: auto; margin-bottom: 0; }
.serv_box h3{ margin: 20px 0px; color: var(--pColor); font-weight: 500; text-transform: capitalize; }
.serv_box{ padding: 28px; box-sizing: border-box; border-radius: 12px; background-color: var(--white); filter: drop-shadow(0px 8px 8px var(--lightest_pColor)); height: 100%; transition: var(--effect); border: 1px solid transparent; position: relative; overflow: hidden; }
.serv_box:hover{ filter: drop-shadow(0px 0px 0px var(--lightest_pColor)); border: 1px solid var(--lighter_pColor); }
.sales_services .row > div{ margin-bottom: 32px; }
.sales_services .head_bttn{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.serv_box .sb_num{ position: absolute; font-size: 300px; line-height: 208px; font-weight: 800; color: var(--pColor); z-index:-1; opacity: 0%; bottom: 0; right: -15%; transition: var(--effect); }
.serv_box:hover .sb_num{ opacity: 3%; }

.sync_connect{ margin-top: 100px; }
.sc_content{ margin-bottom: 40px; }
.sc_content h3{ margin-top: 8px; margin-bottom: 24px; }
.sc_tags p{ margin-bottom: 0; display: inline-block; padding: 16px 20px; background-color: var(--lightest_pColor); color: var(--pColor); text-transform: capitalize; }
.sc_tags p:not(:last-child){ margin-right: 10px; margin-bottom: 10px; }
.sc_list{ margin-top: 32px; }
.sc_list h3{ color: var(--pColor); font-weight: 600; margin-bottom: 20px; }
.sc_list ul li:not(:last-child){ margin-bottom: 2px; }
.sync_connect .image_wrapper:before{ padding-top: 100%; }

.clients{ padding: 50px 0px; margin-top: 100px; background-color: var(--lightest_pColor); }
.clients h2{ margin-bottom: 32px; }
.client_list h3{ display: inline-block; font-weight: 600; color: var(--pColor); padding: 12px 24px; border: 0.5px solid var(--lighter_pColor); background-color: var(--white); }
.client_list h3:not(:last-child){ margin-right: 40px; }

ul.contact_page{ padding-left: 0; margin-top: 32px; }
ul.contact_page li{ font-size: 24px; list-style-type: none; }
ul.contact_page li:not(:last-child){ margin-bottom: 16px; }
ul.contact_page li a{ font-size: 24px; text-decoration: none; color: inherit; }
ul.contact_page li i{ color: var(--pColor); }

footer .foot_logo img{ max-width: 178px; width: 100%; height: auto; }
footer{ padding:80px 0px; background-color: var(--offWhite); }
footer h5{ margin-bottom: 24px; color: var(--dark_pColor); font-size: 20px; }
footer p{ margin: 24px 0px; }
footer .socials i{ font-size: 24px; }
footer .socials i:not(:last-child){ margin-right: 12px; }
footer .copy{ margin-top: 24px; color: var(--dark_pColor); }
footer ul.foot_menu{ margin-left: 0; padding-left: 0; }
footer ul.foot_menu li a, footer ul.foot_menu li, footer p, footer i{ color: var(--offBlack); transition: var(--effect); }
footer ul.foot_menu li a:hover, footer i:hover{ color: var(--black); }
footer ul.foot_menu li a{ text-decoration: none; color: inherit; }
footer ul.foot_menu li{ list-style-type: none; }
footer ul.foot_menu li:not(:last-child){ margin-bottom: 8px; }

.sales_n_services .sales_services{ margin-top: 0; background-color: transparent; }

@media(min-width:992px){ .navbar-toggler{ display:none; } }

@media (max-width: 576px){
	.navbar-brand img{ max-width: 100px; width: 100%; height: auto; }
	p{ font-size: 14px; }
	.banner, .sync_connect, .sales_services, .clients{ margin-top: 40px; }
	.sales_services{ padding: 40px 0px; }
	.banner_content{ margin-top: 28px; }
	.banner_content h1{ margin: 20px 0px; }
	h1{ font-size: 48px; line-height: 54px!important; }
	.inner_banner .banner_content  h1{ font-size: 36px; }
	h2{ font-size: 28px; }
	h3{ font-size: 20px; }
	.banner_content p, h5{ font-size: 16px; }
	.serv_box h3{ padding: 16px 0px; margin: 0; }
	.serv_box{ padding: 20px 16px; }
	.serv_box .icon img{ max-height: 50px; }
	.sc_tags p{ padding: 8px 10px; font-size: 13px; }
	.sc_tags p:not(:last-child) {margin-right: 2px; margin-bottom: 6px; }
	.sc_list li{ font-size: 14px; }
	.client_list h3{ font-size: 16px; }
	.client_list h3:not(:last-child){ margin-right: 0; }
	footer{ padding: 40px 0px; }
	footer .container > .row, .banner_content{ text-align: center!important; }
}