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

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

:root{
	--fontAwesome: 'FontAwesome';
	--para: "Figtree", sans-serif;
	--heading: "Figtree", sans-serif;
	--white: #fff;
	--offwhite: #f1f1f2;
	--black: #1b1b1b;
	--offblack: #343434;
	--primary_dark: #082B25;
	--primary_light: #91D4C9;
	--primary: #2ED9BC;
	--effect: all ease-in-out 350ms;
}

*{ font-size: 16px; text-decoration: none; color: inherit; font-weight: 400; font-family: var(--para); }
h1{ font-size: 70px; line-height: 72px; font-weight: 500; }
h2{ font-size: 60px; font-family: var(--heading); }
h3{ font-size: 40px; text-transform: uppercase; font-family: var(--heading); font-weight: 700; text-align: center; margin-bottom: 32px; }
h4{ font-size: 28px; text-transform: capitalize; font-family: var(--heading); }
h5{ font-size: 24px; font-weight: 500; }
h6{ font-size: 14px; }
span{ color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
a{ text-decoration: none; color: inherit; text-transform: capitalize; }

.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%);}

section{ margin-bottom: 100px; }
.primary{ color: var(--primary); }
.bg_primary{ background-color: var(--primary); }
.bttn{ display: inline-block; border-radius: 8px; text-transform: capitalize; background-color: transparent; }

header .navbar-brand img, header .offcanvas-header img, .foot_logo img{ width: 100%; max-width: 300px; }
header nav{ background-color: var(--primary_light); padding: 32px 0px!important; }
header .navbar-nav li:last-child a{ background-color: var(--primary_dark); color: var(--primary_light); border: 1px solid transparent; border-radius: 99px; transition: all ease-in-out 350ms; }
header .navbar-nav li:last-child a:hover{ background-color: var(--primary_light); color: var(--primary_dark); border: 1px solid var(--primary_dark); }
header .navbar-nav .nav-link{ position: relative; }
header .navbar-nav .nav-link:before{ position: absolute; content:''; bottom: 0px; left: 50%; height: 2px; background-color: var(--primary_dark); width: 0%; transform: translateX(-50%); transition: all ease-in-out 200ms; }
header .navbar-nav .nav-link.active:before, header .navbar-nav .nav-link:hover:before{ width: 80%; }

.offcanvas .navbar-nav li a.active:before{ background-color: transparent; }

.single_banner{ position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; }
.single_banner:before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #ffffff; background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 90%); z-index: 0; }
.banner_slider .single_banner{ overflow: hidden; border-bottom-left-radius: 80px; border-bottom-right-radius: 80px; }
.banner_content{ position: relative; z-index: 1; }
.banner_content h1{ color: var(--white); }
.banner_content h1 span{ font-size: 120px; text-transform: none; font-weight: 700; display: block; line-height: 100px; }
.banner_content{ padding: 200px 0px; }

.inner_banner .banner_content{ padding: 80px 0px; }
.inner_banner{ position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; }
.inner_banner:before{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #ffffff; background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 90%); z-index: 0; }

.image_box{ border-radius: 20px; height: 100%; }
.image_box h5{ padding: 20px 20px; text-align: center; text-transform: capitalize; }
.image_box .image_wrapper{ border-radius: 20px; }
.solution .image_box .image_wrapper:before{ padding-top: 71%; }
.services .image_box .image_wrapper:before{ padding-top: 100%; }
.services .image_box{ box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.08); }

.mission .mission_content{ text-align: center; padding: 60px 32px; background-color: var(--primary_dark); border-radius: 20px; }
.mission .mission_content h3{ color: var(--primary); margin-bottom: 28px; }
.mission .mission_content p{ color: var(--primary_light); }

.contact{ background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; padding: 80px 0px; margin-bottom: 0; }
.contact:before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--white); opacity: 80%; z-index: 0; }
.contact *{ position: relative; z-index:1; }
.contact form input, .contact form select{ margin-bottom: 12px; }
.contact form input:not([type="submit"]), .contact form textarea, .contact form select{ width: 100%; padding: 12px 20px; border-radius: 8px; outline: 0px; border: 1px solid #c7c7c7; color: var(--black); }
.contact form input:not([type="submit"])::placeholder, .contact form textarea::placeholder, .contact form select::placeholder{ color: #999999; text-transform: capitalize; }
.contact form button{ outline: 0px; border:0px; padding: 12px 20px; background-color: var(--primary_dark); color: var(--primary_light); transition: var(--effect); font-weight: 500; }
.contact form button:hover{ color: var(--primary_dark); background-color: var(--primary); }

.usp{ background-color: var(--primary); padding: 80px 0px; margin-bottom: 0; }
.usp_box{ background-color: var(--white); padding: 20px; border-radius: 20px; height: 100%; }
.usp_box_head h5{ color: var(--primary); }
.usp_box .usp_box_head{ display: flex; gap: 4px; align-items: center; }
.usp .image_wrapper{ border-radius: 20px; }
.usp .container > .row > div:nth-child(2) > .row > div:last-child{ margin-top: 24px; }

footer{ background-color: var(--primary_dark); padding: 60px 0px 30px 0px; }
footer .foot_logo img{ margin-bottom: 24px; }
footer .row > div:last-child li{ text-transform: none; }
.foot_widget a{ text-decoration: none; color: inherit; }
.foot_widget p{ color: var(--offwhite); font-size: 16px; }
.foot_widget h5{ font-size: 20px; color: var(--primary); text-transform: uppercase; margin-bottom: 20px; }
.foot_widget ul{ margin-left: 0; padding-left: 0; }
.foot_widget li{ display: flex; align-items: center; gap: 6px; }
.foot_widget ul li{ list-style-type: none; }
.foot_widget ul li:not(:last-child){ margin-bottom: 12px; }
.foot_widget li, .foot_widget li a{ font-size: 16px; text-transform: capitalize; color: var(--offwhite); transition: all ease-in-out 200ms; padding-left: 0px; }
.foot_widget li span{ width: 100%; max-width: 30px; height: 30px; background-color: #c7c7c7; position: relative; z-index:0; display: inline-block; border-radius: 50% }
.foot_widget li span img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
.foot_widget li a:hover{ padding-left: 12px; }

.ic_content h3{ text-align: left; }
.ico_box p{ font-size: 18px; text-transform: capitalize; font-weight: 500; color: var(--primary_dark); }
.ico_holder img{ max-width: 40px; width: 100%; }
.ico_box{ padding: 32px; border-radius: 20px; background-color: hsl(170 69% 95% / 1); height: 100%; }
.advantages{ padding: 80px 0px; background-color: var(--primary); }
.advantages h3, .advantages h5{ color: var(--white); }
.advantages > .container > .row:nth-child(2) > div{ margin-bottom: 24px; }

.contact_details h5{ margin-bottom: 20px; }
.contact_details ul{ margin-left: 0; padding-left: 0; }
.contact_details ul li{ list-style-type: none; }
.contact_details ul li a{ font-size: 20px; text-transform: none; }
.contact_details ul li span{ margin-right: 8px; }
.contact_details ul li:not(:last-child){ margin-bottom: 12px; }

/*==========================*/
#formResponse{ margin-top:10px; font-weight:600; }
.success{ color:green; }
.error{ color:red; }