* { box-sizing: border-box; margin: 0; padding: 0; }

html,body { font-size: 15px; font-family: 'Poppins', sans-serif; background: #fff; color: #161616; }

a { text-decoration: none; color: unset; }
ul { list-style: none; }
img { vertical-align: middle; }

p { font-size: 15px; }

h1,h2,h3,h4,h5,h6 { color: #000; font-family: "Spartan", sans-serif; line-height: 1.4; }
section { overflow: hidden; }
 
.container { max-width: 1140px; margin: auto; }
.widget-section { display: block; padding: 60px 0px; position: relative; }

.section_wrapper { width: 100%; display: block; padding: 60px 16px; position: relative; }

button { border: 0; outline: 0; font-family: var(--ff); letter-spacing: 1px; }


:root {
	--flight : brightness(0) invert(1);
	--fred : invert(12%) sepia(100%) saturate(5549%) hue-rotate(352deg) brightness(98%) contrast(88%);

	--c1 : #32b879;
	--c2 : #ea1826;
	--c3 : #e2973a;

	--mc1 : #3c83b7;
	--mc2 : #102039;

	--bs  : 0px 0px 35px 0px #00000026;
	--bs1 : 0px 0px 30px 0px #0000001a;
	--bs2 : 0 3.4px 2.7px -30px #0000000f, 0 8.2px 8.9px -30px #00000012, 0 25px 40px -30px #00000033;
	--bs3 : rgba(0, 0, 0, 0.1) 0px 4px 12px;
	--bs4 : 0px 0px 20px #0000001a;
	--ts  : all 0.5s ease-in-out;
	--fa  : "Font Awesome 6 Pro";
	--ff : "Spartan", sans-serif;
	--ff2 : "Montserrat", Sans-serif;
}


/* ---------- ----- Top Navbar ----- ---------- */
.section_topnav { width: 100%; display: block; position: relative; background: #232323; padding: 0 16px; z-index: 9999; }
.top_nav { display: flex; justify-content: space-between; align-items: center; }
.top_nav ul { display: flex; gap: 16px; }
.top_nav ul li a { display: flex; align-items: center; gap: 9px; }
.top_nav ul li a i { color: var(--c1); }
.top_nav ul li a p { color: #e1e1e1; transition: var(--ts); }
.top_nav ul li a:hover p { color: #fff; }

.apply_btn { padding: 16px; display: inline-block; background: #32b879; color: #fff;  }

@media all and (max-width:480px) {
	.top_nav p { display: none; }
	.top_nav i { width: 36px; height: 36px; line-height: 36px; text-align: center; background: #fff; border-radius: 50%; }
}



/* ---------- ----- Header ----- ---------- */
.header { display: block; width: 100%; background: #fff; position: sticky; box-shadow: var(--bs); top: 0; z-index: 999; }
.nav_container { max-width: 1140px; margin: auto; display: flex; justify-content: space-between; align-items: center; position: relative; }
.nav_container input { display: none; }

.act-nav { color: var(--c1); }

.nav_log { display: block; }
.nav_log img { width: 200px; height: auto; }
.navbar { display: block; transition: var(--ts);  }
.navigation { display: flex; }
.navigation li { display: block; position: relative; }
.navigation li a,
.navigation li label { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 12px 16px; gap: 9px; }

.menu_btn { display: none; width: 38px; height: 38px; font-size: 26px; background: #ddd; position: relative; }
.menu_btn:before { content:"☰"; display: block; width: 38px; height: 38px; line-height: 38px; text-align: center; position: absolute; top: 0; left: 0;  }

/**/
.dropdown { opacity: 0; visibility: hidden; width: 200px; position: absolute; top: 100%; left: 0; right: 0;
	background: #fff; color: #000; box-shadow: 0 0 10px #00000033; border-top: 3px solid var(--main); transform: translateY(10px); transition: all 0.5s ease; z-index: 1; }
.navigation li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0px); }
.navigation li .dropdown li a { display: block; padding: 12px 16px; }

@media all and (max-width:992px) {
	.nav_container {  z-index: 9999; padding: 0 16px; }

	.navbar { width: 100%; height: 0; position: absolute; top: 100%; left: 0; background: #fff; border-top: 1px solid #f2f2f2; overflow: hidden; box-shadow: var(--bs); }

	.navigation { width: 100%; height: 100%; display: block; }

	.dropdown { width: 100%; transform: translateY(0px); border-top: 0; box-shadow: 0 0 10px #fff0; }
	.nav-link:hover > ul { opacity: 0; visibility: hidden; transform: translateY(0px); }
	.dropdown li a { padding: 12px 12px 12px 26px!important; }
	.toggle:checked ~ .dropdown { opacity: 1; visibility: visible; position: relative; }

	.menu_btn { display: block; }
	#menu_btn:checked ~ .menu_btn:before { content:"⛌";  }
	#menu_btn:checked ~ .navbar { height: max-content; bottom: 0; }
}








.section_title { max-width: 700px; margin: auto; display: block; text-align: center; margin-bottom: 40px; }
.section_title h1 { font-size: 40px; }
.section_title p { margin-top: 12px; }

@media all and (max-width:480px) {
	.section_title h1 { font-size: 32px; }
}



/* ---------- ----- Page Banner ----- ---------- */
.section_bannerpage { display: block; width: 100%; background: #f5f9fa; z-index: 9; }
.banner_page { width: 100%; height: 45vh; display: flex; justify-content: space-around; align-items: center; position: relative; padding: 16px; }
.banner_page:before {  }

.banner_page_text { display:block; text-align: center; position: relative; z-index: 5;  }
.banner_page_text h1 { font-size: 50px; }
.banner_page_text ul { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }

.shape1, .shape2, .shape3 { position: absolute; z-index: 1; }
.shape1 { left: 0; }
.shape2 { right: 0; }
.shape3 { right: -20%; top: -12%; }

@media all and (max-width:480px) {
	.banner_page { height: 35vh; }
	.banner_page_text h1 { font-size: 40px; }
	.shape1 { left: -28%; }
	.shape2 { right: -61px; }
	.shape3 { top: -47%; }
}

@media (min-width:500px) and (max-width:992px) {
	.banner_page { height: 35vh; }
}






/* ---------- ----- Section Aboutus ----- ---------- */
.section_aboutus { display: block; width: 100%; position: relative; padding: 60px 16px; }
.about_row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; }
.about_col { display: block; width: 100%;  }
.about_col h3 { font-size: 22px; }
.about_col p { margin-top: 8px; }

.about_img { display: block; width: 100%; border-radius: 8px; box-shadow:  var(--bs); overflow: hidden; }
.about_img img { width: 100%; height: auto; }

@media all and (max-width:480px) {
	.about_row { grid-template-columns: repeat(1, 1fr); }
}


/* ---------- ----- About Overview ----- ---------- */
.overview { background: url("assets/images/bg_image-03.png") no-repeat center / cover; }
.overview .section_title { max-width: 100%!important; }
.overview_row { display: grid; grid-template-columns: repeat(3, 1fr); }
.overview_col { width: 100%; display: block; }
.overview_col img { width: 100%; height: auto; }
.overview_col ul { display: block; }
.overview_col ul li+li { margin-top: 9px; }
.overview_col ul li { display: block; position: relative; padding-left: 16px; }
.overview_col ul li:before { content: "✓"; font-weight: bold; position: absolute; left: 0; color: var(--c1); }

@media all and (max-width:480px) {
	.overview_row { grid-template-columns: repeat(1, 1fr);  }
}




/* ---------- ----- Methodology Page ----- ---------- */
.abt_skill .section_title { max-width: 100%!important; width: 100%; }
.abt_skill_area  { width: 100%; display: block; }
.abt_skill_area ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; }
.abt_skill_area ul li { display: flex; padding: 8px; background: var(--c1); }
.abt_skill_area ul li b { margin-right: 6px; }

@media all and (max-width:480px) {
	.abt_skill_area ul { grid-template-columns: repeat(1, 1fr); }
}

/* ----- Section Method ----- */
.section_method { display: block; width: 100%; position: relative; padding: 80px 16px; }
.method_row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; }
.method_col { display: block; width: 100%; }
.method_col img { width: 100%; height: auto; }

@media all and (max-width:480px) {
	.method_row { grid-template-columns: repeat(1, 1fr); }

}




/* ---------- ----- Coverage Page ----- ---------- */
.section_coverage { display: block; padding: 80px 16px; position: relative; }

.coverage_table { width: 100%; border-collapse: collapse; }
.coverage_table tr:nth-child(odd) { background: #dddddd; }
.coverage_table tr th { background: var(--c1); }
.coverage_table tr th:first-child,
.coverage_table tr td:first-child { text-align: left; }

.coverage_table th,
.coverage_table td { border: 1px solid #cbcbcb; text-align: center; padding: 8px; }

.btn_shown { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 32px; }
.btn_shown button { display: inline-block; padding: 16px 32px; font-size: 14px; font-weight: 600;
	cursor: pointer; box-shadow: var(--bs); background:#fff; border-radius: 8px; line-height: 1; }
.btn_shown button:hover { background: #f8941f12; }
.btn_shown button.active { background: #f8941f; color: #fff; }

.hidden { width: 100%; padding: 0px 12px;  }

@media all and (max-width: 480px) {
	.hidden { padding: 0; overflow-x: auto; }
}


/* ---------- ----- Components ----- ---------- */
.section_components { width: 100%; display: block; padding: 60px 16px; position: relative; }
.component_row+.component_row { margin-top: 40px; }
.component_row { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.component_col { width: 100%; display: block; }
.component_txt { display: block; width: 100%; }
.component_txt h3 { font-size: 32px; }
.component_txt p { margin-top: 15px; }
.component_img { width: 100%; display: block; padding: 30px; }
.component_img img { width: 100%; height: auto; }

.component_col:last-child { border-radius: 32px; }

.component_row:nth-child(odd) { flex-direction: row-reverse; }
.component_row:nth-child(1) .component_col:last-child { background: #f4efdf; }
.component_row:nth-child(2) .component_col:last-child { background: #e1eed9; }
.component_row:nth-child(3) .component_col:last-child { background: #e5ddf8; }
.component_row:nth-child(4) .component_col:last-child { background: #f4e4e0; }
.component_row:nth-child(5) .component_col:last-child { background: #f2ebcf; }
.component_row:nth-child(6) .component_col:last-child { background: #e1eed9; }
.component_row:nth-child(7) .component_col:last-child { background: #e5ddf8; }

@media all and (max-width:480px) {
	.component_row { flex-direction: column!important; gap: 16px; }
	.component_row:nth-child(odd) { flex-direction: unset; }
	.component_txt h3 { font-size: 24px; }
}

@media (min-width:500px) and (max-width:992px) {


}



/* ---------- ----- Blog Page ----- ---------- */
.section_blogs { display: block; padding: 80px 16px; position: relative; }
.blogs_row { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 24px; }
.blogs_card { display: block; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: var(--bs); }
.blogs_card_image { display: block; }
.blogs_card_image img { width: 100%; height: auto; }
.blogs_card_text { padding: 16px; }
.blogs_card_text p { margin-top: 16px; }

.read_more { display: inline-flex; align-items: center; gap: 16px; margin-top: 16px;
	padding: 9px 16px; border-radius: 8px; font-size: 15px; background: var(--c1); color: #fff; }

@media all and (max-width:480px) {
	.section_blogs { padding: 60px 16px; }
	.blogs_row { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 500px) and (max-width:992px) {
	.blogs_row { grid-template-columns: repeat(2, 1fr); }
}



/* ---------- ----- Blogs Page ----- ---------- */
.section_blogpage { display: block; padding: 60px 16px; }
.blog_container { max-width: 900px; margin: auto; display: block; }

.blog_main_img { display: block; width: 100%; margin: 16px; }
.blog_main_img img { width: 100%; height: auto; }

.blog_box+.blog_box { margin-top: 32px; }
.blog_box { display: block; }
.blog_box h2 {  }
.blog_box p  { margin-top: 16px; }

.note { display: block; margin-top: 32px; }

.blog_page_text { display:block; text-align: center; position: relative; z-index: 5;  }
.blog_page_text h1 { font-size: 30px; line-height: 1.4; }
.blog_page_text h1 span { display: block; }
.blog_page_text ul { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin-top: 8px; }

@media all and (max-width:480px) {
	.blog_page_text h1 { font-size: 22px; }
	.blog_page_text h1 span { display: inline-block; }
}



/* ---------- ----- Map ----- ---------- */
.section_contact { display: block; padding: 16px; bottom: -80px; position: relative; z-index: 2; }
.contact_row { display: grid; grid-template-columns: repeat(2, 1fr);  }
.contact_col { display: block; width: 100%; }

.contact_info { display: block; width: 70%; }
.contact_info h2 { font-size: 32px; }
.contact_info ul { display: block; margin-top: 32px; }
.contact_info ul li+li { margin-top: 32px; }
.contact_info ul li { display: block; }
.contact_info ul li h3 {  }
.contact_info ul li a  { display: block; margin-top: 8px; }

.contact_icons { display: flex; gap: 8px; margin-top: 32px; }
.contact_icons i { width: 38px; height: 38px; line-height: 38px; text-align: center; border: 1px solid #bdbdbd; border-radius: 50%; transition: var(--ts); }
.contact_icons i:hover { background: var(--c1); border: 1px solid var(--c1); color: #fff; }

.contact_form { display: block; background: #fff; box-shadow: var(--bs); padding: 60px; }
.contact_form h3 { font-size: 30px; }
.contact_form p { margin-top: 8px; }
.contact_form input,
.contact_form select,
.contact_form textarea { display: block; width: 100%; padding: 16px 0;  border: 0;
	border-bottom: 1px solid #cdcdcd; border-radius: 8px; margin-top: 8px; outline: 0; }
.contact_form button { display: inline-block; padding: 16px 24px;
	background: var(--c1); color: #fff; border-radius: 8px; box-shadow: var(--bs); margin-top: 24px; }

/* ---------- ----- Map ----- ---------- */
.section_map { display: block; position: relative; z-index: 1; }
.map { width: 100%; height: 50vh; display: block; }
.map iframe { width: 100%; height: 100%; border: 0; }


@media all and (max-width:480px) {
	.section_contact { padding: 60px 16px; bottom: 0; }
	.contact_row { grid-template-columns: repeat(1, 1fr); grid-gap: 24px; }
	.contact_info { width: 100%; }
	.contact_info h2 { font-size: 30px; }
	.contact_form { padding: 60px 30px; }
}



/* ---------- ----- Footer ----- ---------- */
.footer { display: block; position: relative; background: #02060d; color: #c1c1c1; }
.footer:before { content: ""; display: block; width: 100%; height: 100%;
	background: url("assets/images/footer-bg.svg") no-repeat center / cover; position: absolute; left: 0; bottom: 0; }

.upper_footer { display: block; position: relative; padding: 100px 16px; }
.footer_row { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 24px; }
.footer_col { display: block; width: 100%; position: relative; }
.footer_col h3 { color: #fff; margin-bottom: 24px; }

.footer_text { display: block; }
.footer_text img { width: 200px; height: auto; }
.footer_text p { font-size: 14px; margin-top: 12px; }

.footer_links { display: block; }
.footer_links li+li { margin-top: 8px; }
.footer_links li { display: block; position: relative; transition: var(--ts);  }
.footer_links li:before { content: "\f101"; font-family: var(--fa); color: var(--c1); margin-left: 8px; }
.footer_links li:hover { color: #fff; }

.footer_contact { display: block; }
.footer_contact li+li { margin-top: 12px; }
.footer_contact li i { display: block; text-align: center; color: var(--c1); }
.footer_contact li { display: flex; align-items: center; gap: 16px; }
.footer_contact li a { display: block; width: -webkit-fill-available; }
.footer_contact li:last-child { align-items: flex-start; }

.footer_bottom { display: block; border-top: 1px solid #3b3b3b; }
.bottom_row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 30px 16px; }
.bottom_row p {  }

.icons { display: flex; gap: 8px; margin-top: 16px; }
.icons i { width: 38px; height: 38px; line-height: 38px; text-align: center; background: #080808; border-radius: 50%; transition: var(--ts); }
.icons i:hover { background: var(--c1); }

@media all and (max-width: 480px) {
	.upper_footer { padding: 40px 16px; }
	.footer_row { grid-template-columns: repeat(1, 1fr); }

	.bottom_row { flex-direction: column; gap: 8px; padding: 24px 16px; }
}

@media (min-width:500px) and (max-width:992px) {
	.upper_footer { padding: 60px 16px; }
	.footer_row { grid-template-columns: repeat(2, 1fr); }
}