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

body, html { font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; color: #666666; }

a { text-decoration: none; color: unset; }
img { vertical-align: middle; }
ul { list-style: none; }
p { color: #565656; line-height: 26px; }
h1, h2, h3, h4 { font-weight: 700; color: #232323; line-height: 1.2; font-family: "Manrope", sans-serif; }

.container { max-width: 1140px; margin: auto; }

:root {
	--foot : #96aac1;

	--c1 : #0493e5;
	--c2 : #005586;
	--c4 : #151618;
	
	--bs : 0px 0px 30px 0px #0000001a;
	--ts  : all 0.5s ease-in-out;
	--fa  : "Font Awesome 6 Pro";


	--lg : linear-gradient(148deg, #0493e5 0%, #005586 77%);


	--grad : linear-gradient(90deg, #0493e5 0%, #005586 77%);
	--hgrad : linear-gradient(90deg, #005586 0%, #0493e5 77%);

	--1main : #ff5621;
	--1grad : linear-gradient(90deg, #ff5621 0%, #f03900 77%);
	--1hgrad : linear-gradient(90deg, #f03900 0%, #ff5621 77%);
}


.widget-section { width: 100%; display: block; padding: 80px 16px; }
.bg { background: #edf5ff; }
.bgg { background: #f3f7fd; }
.bgm { background: url('assets/images/shape-01.png') no-repeat; background-size: cover; background-position:bottom; position: relative; }
.bgm:after { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #f3f7fd; z-index: -1; }


/* ----- Title ----- */
.section-title { display: block; max-width: 750px; text-align: center; margin: auto auto 60px auto; }
.section-title h2 { display: inline-block; font-size: 32px; font-weight: 700; position: relative; text-transform: capitalize; }
.section-title h4 { font-size: 20px; font-weight: 500; margin-bottom: 5px; text-transform: uppercase; color: var(--c1); }
.section-title .style { display: block; }
.section-title .style span { display: inline-block; width: 60px; height: 3px; background: #333; }
.section-title .style span:last-child { background: var(--c1); }

@media all and (max-width: 480px) {
	.section-title h2 { font-size: 24px; }

}



/* ---------- ---------- ---------- ---------- ---------- ----------
								Header
---------- ---------- ---------- ---------- ---------- ---------- */
.act-nav { color: var(--c1)!important; }
.header { display: block; position: sticky; top: 0; background: #fff; box-shadow: 0 1px 3px #ddd; z-index: 999; }

.navbar { max-width: 1200px; margin: auto; display: flex; justify-content: space-between; align-items: center; position: relative; padding: 12px 0; }
.navbar input { display: none; }

.logo { max-width: 100%; display: block; padding: 6px 16px; }
.logo img { width: 200px; height: auto; }

.navigation { max-width: 100%; display: block; }
.nav-list { display: flex; justify-content: flex-end; }
.nav-list li { display: block; position: relative; color: #000; }
.nav-list li a { display: block; padding: 16px; position: relative; font-weight: 700; font-size: 15px; }
.nav-list li label { display: flex; align-items: space-between; align-items: center; padding: 16px; position: relative; font-weight: 700; font-size: 15px; }
.nav-list li label i { margin-left: 8px; }

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

/**/
.menu { display: none; position: absolute; top: 20%; right: 16px;
	width: 40px; height: 40px; line-height: 40px; text-align: center;border: 2px solid var(--c1); color: var(--c1); border-radius: 4px; }
.menu:before { content: '☰'; font-size: 26px; transition: all 0.5s ease; }

.navlogo { display: none; width: 220px; height: auto; padding: 10px; }

@media all and (max-width: 998px) {
	.navbar { display: block; }

	.navigation { display: block; width: 100%; height: 100%; background: #0000004a; position: fixed; top: 0; left: -100%; transition: all 0.5s ease;  }
	.navlogo { display: block; }

	.nav-list { display: block; width: 300px; height: 100%; background: #fff;  }
	.nav-list li a { width: 100%; display: block; }
	.nav-list li a,.nav-list li label { padding: 12px 16px; }

	.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; }
	.dropdown li a:before { content: '—'; }

	.toggle:checked ~ .dropdown { opacity: 1; visibility: visible; position: relative; }

	.menu { display: block; z-index: 999; }
	#menu:checked ~ .navigation { left: 0; }
	#menu:checked ~ .menu:before { content: '⛌'; }
}




/* ---------- ---------- ---------- ---------- ---------- ---------- ----------
									Index CSS
---------- ---------- ---------- ---------- ---------- ---------- ---------- */


/* ---------- Banner ---------- */
.banner_section { width: 100%; display: block; position: relative; background: #edf5ff; }

.banner_carousel { display: block; width: 100%; position: relative; overflow: hidden;  }
.banner_carousel .banner_slide { width: 100%; display: inline-block; overflow: hidden; }
.banner_carousel .flickity-page-dots { bottom: 0; }
.banner_carousel .flickity-page-dots .dot { width: 15px; height: 15px; border-radius: unset; opacity: 1; border: 3px solid var(--c1); background: #fff0; }
.banner_carousel .flickity-page-dots .dot.is-selected { background: var(--c1); }

.banner { width: 100%; height: 80vh; display: block; position: relative; }
.banner_img1 { background: url("assets/images/page_lead.jpg") no-repeat center / cover; }
.banner_img2 { background: url("assets/images/page_pm.jpg") no-repeat center / cover; }
.banner_img3 { background: url("assets/images/slide-03.jpg") no-repeat center / cover; }

.banner_img { width: 100%; height: 100%; display: block; transform: scale(1.2, 1.2);  animation-name: bannerzoomin; animation-duration: 15s; }
.banner_img:after { content: ""; display: block; width: 100%; height: 100%; background: #000000a6; position: absolute; top: 0; left: 0; }

@keyframes bannerzoomin {
	from { transform: scale(1, 1); } to { transform: scale(1.2, 1.2); }
}

.banner_ { max-width: 800px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.banner_ h2 { font-size: 62px; color: var(--c1); text-align: center; }
.banner_ p { margin-top: 32px; font-size: 18px; color: #fff; text-align: center; }

.banner_btns { display: flex; justify-content: center; gap: 16px; margin-top: 32px; }
.banner_btns a { display: inline-block; padding: 10px 24px; font-weight: 500;
	background: var(--c4); color: #fff; border-radius: 12px 0 12px 0; box-shadow: var(--bs); }
.banner_btns a:first-child { background: var(--c1); }
.banner_btns a:first-child:hover { background: var(--c4); }

@media all and (max-width: 480px) {
	.banner { width: 100%; height: 60vh; }
	.banner_ h2 { font-size: 30px; }
	.banner_ { padding: 16px; top: 15%; left: 0%; transform: unset; }
}

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

}



/* ---------- ---------- Choose ---------- ---------- */
.choose-area .row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 32px; }
.choose-col { width: 100%; display: block; position: relative; }
.choose-col img { display: block; width: 100%; height: auto; padding: 0 35px 0 16px; }
.choose-col h5 { font-size: 20px; margin-bottom: 15px; text-transform: uppercase; color: var(--c1); }
.choose-col h2 { font-size: 32px; font-weight: 500; margin-bottom: 25px; }
.choose-col strong { font-weight: 900; text-decoration: underline; }
.choose-col .info li { float: left; width: 50%; padding: 0 15px; position: relative; z-index: 1; padding-left: 20px; margin-top: 20px; }
.choose-col .info li::after { content: "◥"; transform: rotate(45deg); position: absolute; top: -2px; left: -4px; color: var(--c1);  }
.choose-col .info li h4 { font-weight: 700; font-size: 16px; }
.choose-col p+p { margin-top: 16px; }
.shape::after { content: ""; position: absolute; top: -40px; left: -50px; width: 150px;height: 150px; background: url('assets/images/dotted-bg.png') no-repeat; transform: rotate(-45deg); }

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

@media (min-width: 500px) and (max-width: 992px) {
	.choose-area .row { grid-gap: 16px; }
	.choose-col img { padding: 0; }
}



/* ---------- ----- Services ----- ---------- */
.our-service-area .row { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; }
.service-col { display: block; text-align: center; background: #fff; box-shadow: 0 5px 25px 0 #00000017; padding: 30px; position: relative; }
.service-col h3 { font-size: 20px; text-transform: capitalize; margin-bottom: 15px; }
.service-col p { text-align: justify; }
.serv-btn { position: relative; display: inline-block; color: #333; font-weight: 700; margin-top: 16px; padding: 12px 30px; }
.serv-btn::after { content: ""; position: absolute; top: 0; left: 0; width: 52px; height: 100%;
	background: linear-gradient(-70deg, transparent, var(--c1)); border-radius: 50%; transition: all 0.35s ease-in-out; opacity: 0.6; z-index: 1; }
.service-col:hover .serv-btn::after { width: 100%; border-radius: 30px; color: #ffffff; }
.service-col::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 100%; opacity: 0.5; z-index: 1;
	background: url('assets/images/border-shape.png'); background-size: contain; background-repeat: no-repeat; background-position: left bottom; }

.serv-icon { display: inline-block; margin-bottom: 26px; box-shadow: 0px 10px 30px 0px #2c82ed66; border-radius: 50%;  }
.serv-icon i { font-size: 35px; background: var(--c1); color: #fff; width: 80px;height: 80px;line-height: 80px; text-align: center; position: relative; border-radius: 50px; z-index: 1;}

@media all and (max-width: 480px) {
	.our-service-area .row { grid-template-columns: repeat(1, 1fr); grid-gap: 16px; }
}

@media (min-width: 500px) and (max-width: 1200px) {
	.our-service-area .row { grid-gap: 16px; }
	.service-col { padding: 30px; }
}


/* ---------- ----- Process ----- ---------- */



/* ---------- ----- Reviews ----- ---------- */
.reviews .row { display: flex; align-items: center; gap: 32px; }
.review-col { display: block; width: 100%; padding: 0 16px; }
.review-col img { width: 100%; height: auto; }
.review-area { display: block; position: relative; }
.review-area h2 { font-size: 32px; font-weight: 200; margin-bottom: 1px; line-height: 1.2; }
.review-area h2 strong { display: block; font-weight: 900; }
.review { display: block;  }
.client-review { position: relative; padding: 30px 0; }
.client-review:before { content: "\f10d"; position: absolute; top: -10px;  color: #9e9e9e; 
	font-family: "Font Awesome 6 Pro"; font-size: 150px; font-weight: 900; z-index: -1; opacity: 0.2; line-height: 1; }
.client-info { padding-top: 30px; border-top: 1px dashed #ddd; margin-bottom: 32px; }

.slider-review {  }
.slider-review .flickity-page-dots { bottom: 0px; }
.slider-review .flickity-page-dots .dot { width: 15px; height: 15px; border-radius: unset; opacity: 1; border: 2px solid #e7e7e7; background: #fff0; border-radius: 50px; }
.slider-review .flickity-page-dots .dot.is-selected { background: var(--c1); border: 5px solid #e7e7e7 }

@media all and (max-width: 480px) {
	.reviews .row { flex-direction: column; }
}

@media (min-width: 500px) and (max-width: 1200px) {
	.reviews .row { gap: 16px; }
	.review { margin-bottom: 24px; }
}



/* ---------- ---------- Process ---------- ---------- */
.process_area { background: url('assets/images/process_bg.png') no-repeat bottom center / cover; }

.process_row { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 40px; margin-bottom: 60px; }
.process_col { display: ; flex-direction: column; position: relative; }
.process_col:nth-child(1) .process_arrow { top: 40%; }
.process_col:nth-child(2) .process_arrow { top: 30%; }

.process_arrow { position: absolute; right: -60px; }
.process_gap { width: 100%; height: 170px; }

.process_icon { position: relative; width: 170px; height: 170px; margin: auto;
	border-radius: 50%; border: 5px solid #132580; background: #02126a; padding: 16px; }
.process_icon:before { content: ""; display: block; width: 112%; height: 112%; opacity: 0; transition: var(--ts);
	background:url('assets/images/circle.png')no-repeat center center / cover; position: absolute; top: -10px; left: -10px; }
.process_col:hover .process_icon:before { opacity: 1; }

.process_icon img { width: 100%; height: auto; }

.process_text { text-align: center; margin-top: 24px; }
.process_text h3 { font-size: 24px; color: #fff; text-transform: uppercase; }

@media all and (max-width: 480px) {
	.process_row { grid-template-columns: repeat(1, 1fr); }
	.process_gap { display: none; }
	.process_arrow { display: none; }

}


.counter-area { display: block; position: relative; padding: 40px 16px; }
.counter { width: 100%; display: flex; justify-content: space-between; box-shadow: 0 5px 30px 0 #d6d7d891; padding: 100px 40px; border-radius: 4px; position: relative; overflow: hidden; }
.counter::before,
.counter::after { content: ""; position: absolute; background: var(--c1); transform: rotate(25deg); border-radius: 10px; z-index: -1; }
.counter::before { width: 200px; height: 200px; opacity: 0.5; top: -65px; left: -65px; }
.counter::after { width: 150px; height: 150px; top: -50px; left: -50px; }

.counter-col { flex: 1; text-align: center; }
.counter-col span { display: block; font-size: 40px; font-weight: 600; position: relative; color: var(--c1); margin-bottom: 12px; }
.counter-col h4 { font-size: 20px; font-weight: 600; }
.count:after { content: "╋"; display: inline-block; font-size: 26px; color: var(--c1); position: absolute; top: 8px; margin-left: 6px; }

@media all and (max-width: 480px) {
	.counter { flex-direction: column; gap: 24px; }
	.counter-col span { font-size: 26px; }
	.count:after { font-size: 16px; }
}




/* ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ----------
												Page CSS
---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- */


/* ========== Page Banner ========== */
.banner-page { padding: 150px 0; position: relative; background: var(--grad); margin-bottom: 30px; }
.fixed-bg { background: url('assets/images/page-banner.png') no-repeat; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.page-content { text-align: center; }
.page-content h1 { font-weight: 700; color: #ffffff; font-size: 3rem; }
.page-content p { color: #fff; font-size: 16px; }

.breadcrumb { display: inline-block; position: absolute; left: 50%; bottom: -20px; transform: translate(-50%, 0);
	margin: auto; background: #fff; padding: 15px 35px; box-shadow: 0 5px 30px 0 #d6d7d891; border-radius: 30px; z-index: 9; }
.breadcrumb li { display: inline-block; position: relative; font-weight: 800; color: #000; text-transform: uppercase; font-size: 14px; }
.breadcrumb li i { margin-right: 4px; }
.breadcrumb li.pactive { color: var(--c1); }

.shapes { padding: 0 24px; margin: 0 8px; }
.shapes::before,
.shapes::after { content: ""; font-weight: 600; display: inline-block; position: absolute; top: 6px; width: 5px; height: 5px; color: #ddd; border: 2px solid #c0b6b6; border-radius: 50%; }
.shapes::before { left: 0; }
.shapes::after {right: 0;}

@media all and (max-width: 480px) {
	.banner-page { padding: 120px 16px; }
	.breadcrumb { position: relative; }
}

@media (min-width: 500px) and (max-width: 1200px) {
	.banner-page { padding: 120px 0; }
}


/* ========== ===== About Page ===== ========== */
.about-area .row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 32px; }
.about-col { width: 100%; display: block; }
.about-col img { display: block; width: 100%; height: auto; padding: 0 36px 0 16px; }

.about-content h4 { color: var(--c1); font-weight: 800; font-size: 1.25rem; margin-bottom: 15px; }
.about-content h2 { font-size: 2rem; font-weight: 200; margin-bottom: 25px; }
.about-content h2 strong { display: block; font-weight: 900; }
.about-content p {  }
.progress-box+.progress-box { margin-top: 26px; }
.progress-box h3 { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 15px; }

.progress-items { margin-top: 25px; }
.progress { display: flex; height: 5px; border-radius: 30px; overflow: inherit; font-size: .75rem; background: #e9ecef; opacity: 1; left: 0px; }
.progress-bar { display: flex; flex-direction: column; justify-content: center; position: relative; background: var(--c1); transition: width .6s ease; z-index: 1; overflow: inherit; }
.progress-bar::after { content: ""; position: absolute; right: 0; top: 0; width: 2px; height: 15px; background: var(--c1); margin-top: -5px; z-index: -1; }

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

@media (min-width: 500px) and (max-width: 1200px) {
	.about-area .row { grid-gap: 16px; }
}




/* ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ----------
											Service	Page CSS
---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- */



/* ----- SERVICE PAGE ----- */
.widget-service { display: block; position: relative; padding: 60px 16px; }
.service-row { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; }
.service-page-col { width: 100%; display: block; }
.sc1 { height: fit-content; }
.sc2 {  grid-column: 1 / span 2; }

/* LEFT SIDE CONTENT */
.service-details__image { display: block; margin-bottom: 30px; }
.service-details__image img { width: 100%; object-fit: cover; border-radius: 10px; }

.service-details__text h1 { font-size: 24px; color: var(--c1); margin-bottom: 16px; }
.service-details__text h2 { font-size: 20px; color: var(--c1); margin-bottom: 16px; }
.service-details__text p+p { margin-top: 8px;}


/* Work CONTENT */
.how_text { margin-top: 32px; }
.how_text h3 { font-size: 16px; margin-top: 24px; }
.how_text p { margin-top: 8px; }
.how_text ul { margin-top: 16px; }
.how_text ul li+li { margin-top: 8px; }
.how_text ul li i { color: var(--c1); }

/* Work CONTENT */
.Work_text__ { margin-top: 32px; }
.Work_text_ { display: flex; gap: 16px; margin-top: 24px; }

.Work_icon { width: 52px; height: 52px; line-height: 52px; text-align: center;
	border-radius: 50%; background: #fff; border: 2px solid var(--c1); color: var(--c1); font-size: 24px; }

.Work_text {  }
.Work_text h3 { font-size: 16px; }
.Work_text p { margin-top: 8px; }

/* Service Text */
.service_text_ { margin-top: 32px; }
.service_text_ h3 { font-size: 16px; }
.service_text_ p { margin-top: 8px; }


/* RIGHT SIDE CONTENT */
.widget-anchor { width: 100%; padding: 30px 24px; position: relative; border: 1px solid #efeef5; }
.widget-anchor h3 { margin-bottom: 24px; }

.category-list { display: block; position: relative; }
.category-list li { display: block; position: relative; overflow: hidden; border-radius: 4px; }
.category-list li+li { margin-top: 16px; }
.category-list li a { display: flex; justify-content: space-between; position: relative; padding: 16px; background: #0493e50d; font-weight: 900; }
.category-list li a:before { content: ''; position: absolute; bottom: 0; right: 0; left: 0;
	background: var(--grad); overflow: hidden; width: 0; height: 100%; transition: .3s ease; z-index: -1; }

.category-list li:hover a:before { width: 100%; }
.category-list li:hover a { color: #fff; }

.category-list li a.act { background: var(--grad); color: #fff; }

.category-list li a { transition: all 0.3s ease; }

/*  */
.widget-content { width: 100%; padding: 40px; position: relative; border: 1px solid #efeef5; }
.widget-content h3 { margin-bottom: 24px; }
.widget-content button { padding: 14px 30px; font-size: 16px; margin-top: 24px; border: 0; outline: 0; background: var(--grad); color: #fff; border-radius: 50px; }
.widget-content button:hover { background: var(--hgrad); }
.timing-list { display: block; }
.timing-list li { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #efeef5;  }
.timing-list li:last-child { border-bottom: 0; }
.timing-list li+li { margin-top: 26px; }


@media all and (max-width: 998px) {

	.service-row, .flex-row { grid-template-columns: repeat(1, 1fr); }
	.sc2 {  grid-column: unset; grid-row: unset; }
}






/* ========== ===== Blog Page ===== ========== */

.widget-blog { display: block; position: relative; padding: 60px 0px; }
.blog-row { display: flex; justify-content: space-around; }
.blog-col { display: block; position: relative; padding: 16px; }
.blog-col:first-child { width: 70%; }
.blog-col:last-child { width: 30%; }

/* Blog page area */
.blog-poster+.blog-poster { margin-top: 36px; }
.blog-poster { display: block; position: relative; box-shadow: 0 5px 30px 0 #d6d7d891; border-radius: 10px; background: #ffffff; overflow: hidden; }
.blog-poster .thumb { display: block; padding: 15px; }
.blog-poster .thumb img { width: 100%; height: 43vh; object-fit: cover; display: block; }
.blog-poster .info { padding: 15px 30px 30px 30px; }
.blog-poster .info ul { display: flex; margin-bottom: 16px; }
.blog-poster .info ul li+li { margin-left: 16px; }
.blog-poster .info h3 { font-size: 24px; margin-bottom: 15px; }
.blog-poster .info a { display: inline-block; padding: 12px 32px; background: var(--grad); color: #fff; border-radius: 50px; margin-top: 32px; font-size: 16px; transition: 0.5s; }
.blog-poster .info a:hover { background: var(--hgrad); }


/* Blog pagination */
.banner-pages { display: flex; justify-content: space-around; padding: 16px; margin-top: 46px; }
.banner-pages .pagination { display: inline-block; text-align: center; font-weight: 600; color: #333; }
.banner-pages .pagination a { display: inline-block; height: 50px; line-height: 50px; box-shadow: 0 5px 30px 0 #d6d7d891; padding: 0 20px; border-radius: 4px; border: 1px solid #e7e7e7; }
.banner-pages .pagination a:hover { background: #f2f2f2; }
.banner-pages .pagination a.pact { background: var(--c1); color: #fff; }


/* ----- Blog Page ----- */
.blog__page { display: block; position: relative; }
.blog__page h1 { font-size: 38px; margin-top: 24px; }
.blog__page h2 { font-size: 26px; margin-top: 24px; }
.blog__page h4+h3 { margin-top: 14px; }
.blog__page h3 { font-size: 18px; margin-top: 24px; }
.blog__page p { margin-top: 10px; }
.blog_img { display: block; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; }
.blog_img img { width: 100%; height: auto; }

@media all and (max-width: 498px) {
	.blog__page h2 { font-size: 32px; margin-top: 16px; }
	.blog__page h4 { font-size: 22px; margin-top: 16px; }
	.blog__page h3 { font-size: 22px; margin-top: 16px; }
	.blog__page p { font-size: 16px; line-height: 28px; }
}


/* ----- Blog Side bar ----- */
.sidebar-item+.sidebar-item { margin-top: 46px; }
.sidebar-item h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 30px; position: relative; z-index: 1; }

.recent-post .thumb  { display: table-cell; width: 100px; }
.recent-post .thumb img { width: 100%; height: auto; }
.recent-post ul li .info { display: table-cell; color: #837f7e; line-height: 26px; padding: 0 0 0 18px; vertical-align: top; }
.recent-post ul li+li { margin-top: 16px; padding-top: 16px; border-top: 1px solid #ddd; }
.recent-post ul li .info ul { display: flex; font-size: 13px; margin-top: 12px; }
.recent-post ul li .info ul li+li { margin-left: 12px; margin-top: 0; padding-top: 0; border-top: 0; }
.recent-post ul li .info a { color: #666666; text-decoration: inherit; font-weight: 800; font-size: 16px; }

.sidebar-item.gallery .images { display: flex; flex-wrap: wrap; }
.sidebar-item.gallery .images img { width: 33.33%; padding: 7px;  }

.sidebar-item.follow { display: block; }
.sidebar-item.follow i { width: 40px; height: 40px; line-height: 40px; text-align: center; background: #f7f7fe; border-radius: 4px; transition: 0.5s; }
.sidebar-item.follow i:hover { background: var(--c1); color: #fff; }

.sidebar-item.tags ul li { display: inline-block; padding: 12px; border: 1px solid #ddd; border-radius: 30px; margin-bottom: 12px; }












/* ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ----------
											Contact	Page CSS
---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- */


/* ========== ===== Contact Page ===== ========== */
.contact-area .row { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; }

.contact-col { width: 100%; display: block; position: relative; }
.cc2 { grid-column: 2 / span 3; }

.address-items { padding: 60px 30px; background: var(--grad); position: relative; }
.address-items::before,
.address-items::after  { content: ""; position: absolute; right: -50px; top: -50px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; }
.address-items::before { width: 180px; height: 180px; }
.address-items::after { width: 150px; height: 150px; }
.address-items .item+.item { margin-top: 32px; padding-top: 32px; border-top: 1px dashed #ddd; }
.address-items .item >* { color: #fff; }
.address-items .item h3 { font-size: 24px; margin-bottom: 16px; }
.address-items .item a { display: block; }
.address-items .item a+a { margin-top: 8px; }

.contact-form { display: block; }
.contact-form h2 { font-size: 32px; font-weight: 200; margin-bottom: 30px; }
.contact-form h2 strong { display: block; font-weight: 900; }
.contact-form input,
.contact-form textarea { width: 100%; padding: 0px 20px; background: #f7f7f7; font-size: 16px; line-height: 48px; border: 0; border-radius: 2px; }
.contact-form button { font-weight: 600; padding: 16px 40px; background: var(--grad); color: #fff; border-radius: 50px; border: 0; outline: 0; margin-top: 24px; }
.contact-form button:hover { background: var(--hgrad); }
.flex-input { width: 100%; display: flex; gap: 32px; margin: 24px 0; }

.maps { display: block; }
.maps iframe { width: 100%; height: 450px; vertical-align: middle; border: 0; }

@media all and (max-width: 480px) {
	.contact-area .row { grid-template-columns: repeat(1, 1fr); }
	.cc2 { grid-column: unset; }

	.flex-input { flex-direction: column; gap: 24px; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.contact-area .row { grid-template-columns: repeat(2, 1fr); grid-gap: 16px; }
	.cc2 { grid-column: unset; }
	.contact-form h2 { font-size: 30px; }
}



/* ---------- ---------- ---------- ---------- ---------- ----------
							Footer Area
---------- ---------- ---------- ---------- ---------- ---------- */

.footer { width: 100%; display: block; background: #001d4c; color: #fff; }

.footer-area .row { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; }
.footer-upper { max-width: 1140px; margin: auto; padding: 80px 16px 60px 16px; }

.footer-col { width: 100%; display: block; }
.footer-col h3 { font-size: 24px; font-weight: 700; margin-bottom: 30px; text-transform: uppercase; color: unset; }
.footer-col p { color: #96aac1; }
.footer-col img { display: block; width: 180px; height: auto; margin-bottom: 24px; }
.footer-col a:hover { color: #fff; }

.foot-link li a { display: block; padding: 6px; color: var(--foot); transition: 0.5s; }
.foot-link li a:before { content: '❯'; color: #fff; margin-right: 2px; }

.foot-info li+li { margin-top: 24px; }
.foot-info h4 { display: flex; align-items: center; font-weight: 600; margin-bottom: 8px; color: unset;  }
.foot-info h4 i { width: 35px; font-size: 20px; margin-right: 0px; }
.foot-info a { display: inline-block; margin-left: 35px; color: var(--foot); transition: 0.5s; }

.social-media { display: inline-block; padding-top: 16px; border-top: 1px dashed var(--foot); margin-top: 24px; }
.social-media i { width: 40px; height: 40px; line-height: 40px; text-align: center; border: 1px solid var(--foot); color: #fff; border-radius: 50px; transition: 0.5s; }
.social-media i:hover { background: var(--foot); }

.footer-bottom { display: block; padding: 30px; color: var(--foot); text-align: center; border-top: 1px solid #ffffff26; }
.footer-bottom p { color: var(--foot); }
.footer-bottom a { color: #fff; font-weight: 600; }

.svg-shape svg.gray { fill: #fff; }

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