/* =========Common CSS Styling Start ==========*/
:root {
 --greenColor: #01875f;
 --greyColor: #5f6368;
 --subWhiteColor: #f8f9fa;
 --borderColor: #dadce0;
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body {
  font-family: 'Segoe UI', 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
}

p {
   font-size: 16px;
   line-height: 1.75;
   margin: 0;
}

h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
}

img {
   max-width: 100%;
   height: auto;
}
/* ========== Common CSS Styling End ============*/

/* =========App top bar CSS styling start ========*/
#app-top-bar {
	padding: 22px 16px;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid var(--borderColor);
	width: 100%;
}

#app-top-bar .row {
	align-items: center;
}

#app-top-bar .app-logo-area {
    display: flex;
    align-items: center;
    gap: 5px;
}

#app-top-bar li {
	padding: 0 12px;
}

#app-top-bar li#menu-item-12 a {
	color: var(--greenColor);
}

#app-top-bar li a {
	font-size: 14px;
	font-weight: 400;
	color: var(--greyColor);
	text-decoration: none;
	padding: 8px 0;
	transition: 0.3s;
}

#app-top-bar li a:hover {
	color: #202124;
}

#app-top-bar .app-top-bar-icons {
    display: flex;
    justify-content: end;
}

.app-top-bar-icons i {
	color: var(--greyColor);
	font-size: 20px;
	margin-left: 16px;
	cursor: pointer;
	transition: 0.3s;
}

.app-top-bar-icons i:hover {
	color: #202124;
}

.app-top-bar-icons .fa-magnifying-glass {
	font-size: 17px;
}
/* =========App top bar CSS styling end ========*/

/* =========App header CSS styling start ========*/
.app-header-area {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-bottom: 10px;
	padding: 16px;
	background-color: #fff;
	width: 100%;
}

.card-app-icon{
	width: 160px;
	height: 160px;
	background-color: #fff;
	border-radius: 12px;
	margin: 7px 20px 0 0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
	overflow: hidden;
}

.app-header-area .app-logo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.app-header-area .app-info-area h1 {
	font-size: 52px;
	font-weight: 600;
	margin: 0 0 4px;
	line-height: 1.5;
	color: #202124;
}

.app-header-area .app-info-area p {
	font-size: 16px;
	font-weight: 400;
	color: var(--greenColor);
	margin: 0 0 4px;
	cursor: pointer;
}

/* =========App header CSS styling end ==========*/

/* =========App meta CSS styling start ==========*/
.app-meta-area {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 12px;
	color: var(--greyColor);
	margin-bottom: 40px;
}

.item {
	text-align: center;
	padding: 5px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-width: 120px;
}

.app-meta-area img {
	width: 12px;
	height: 12px;
	vertical-align: middle;
	margin-right: 4px;
}

.app-meta-area .info {
	font-size: 12px;
	color: var(--greyColor);
	margin-top: 4px;
}


.app-meta-area .item .rating {
	color: #202124;
	font-size: 14px;
}

.separator {
	height: 20px;
	width: 1px;
	background-color: var(--greyColor);
	margin: 0 10px;
	align-self: center;
}

/* =========App meta CSS styling end ============*/

/* ======App buttons CSS styling start ==========*/
.popupOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn 0.3s;
}

.popupOverlay.active {
   display: flex;
}

@keyframes fadeIn {
	from{opacity: 0;}
	to{opacity:1}
}


.popup-body {
	background: #fff;
	padding: 30px;
	border-radius: 5px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.3);
	text-align: center;
	width: 400px;
	animation: slideUp 0.3s;
}

@keyframes slideUp {
	from {
			transform: translateY(50px);
			opacity: 0;
	}

	to {
		transform: translateY(0px);
		opacity: 1;  
	}
}

.modal-title {
	font-size: 18px;
	font-weight: 500;
	color: #202124;
	margin-bottom: 16px;
}

.modal-desc {
	font-size: 14px;
	color: var(--greyColor);
	margin-bottom: 24px;
}

.popupBtns {
	display: flex;
	gap: 15px;
	justify-content: center;
}

.popupBtn {
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.cancelBtn {
	background: var(--subWhiteColor);
	color: #202124;
}

.confirmBtn {
	background: var(--greenColor);
	color: #fff;
}

.confirmBtn:hover {
	background: #006644;
}

.app-buttons {
	display: flex;
	align-items: center;
	margin-top: 4px;
	gap: 16px;
}

.app-buttons button {
	height: 42px;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	padding: 5px 24px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.app-buttons .installBtn {
	background: var(--greenColor);
	width: 240px;
	color: #ffffff;
}

.app-buttons .shareBtn {
	text-transform: uppercase;
	background: none;
	color: var(--greenColor);
}

.installBtn:hover {
	background: #006644;
}

.shareBtn:hover {
	background: var(--subWhiteColor);
}

.shareBtn i {
	margin-right: 8px;
	font-size: 15px;
}

/* ======App buttons CSS styling end============*/

/* ======App device CSS styling start===========*/
.devices {
	display: flex;
	align-items: center;
	margin-top: 40px;
	color: var(--greyColor);
	font-size: 14px;
	margin-bottom: 30px;
}

.devices i {
	margin-right: 8px;
	font-size: 18px;
}
/* =========App device CSS styling end===========*/

/* ========App slider CSS styling start=========*/
.sliders {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 20px;
	gap: 36px;
}

.card {
	flex: 0 0 auto;
	width: 250px;
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	scroll-snap-align: start;
	position: relative;
}

.card img {
	width: 100%;
	display: block;
}
/* ======App slider CSS styling end============*/

/*==App whats, data, about,rating, support, section common CSS styling start==*/
.whats-new-area, .about-area, .rating-area, .app-support {
	margin-bottom: 24px;	
}

.section {
	background: #fff;
	padding: 16px;
}

.section-title {
	font-size: 20px;
	font-weight: 500;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	color: #202124;
	margin-bottom: 10px;
}

.section-title i {
	margin-left: auto;
	color: var(--greyColor);
	font-size: 26px;
	cursor: pointer;
}

.whats-new-area p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--greyColor);
}

.description {
	font-size: 14px;
	line-height: 1.5;
	color: var(--greyColor);
	margin-bottom: 1rem;
}

.about-area p {
	color: #202124;
	margin-top: 0;
	margin-bottom: 1rem;
}
/*==App whats, data, about,rating, support, section common CSS styling end==*/

/* ====App data safety box CSS styling Start=====*/
.data-safety-box {
	margin-bottom: 24px;
	border: 1px solid var(--borderColor);
	border-radius: 8px;
	padding: 12px;
}

.data-safety-box .item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	margin-bottom: 12px;
	padding: 6px;
}

.data-safety-box .item i {
	color: #01875f;
	margin-right: 8px;
	font-size: 20px;
	margin-top: -2px;
}

.data-safety-box .item span {
	font-size: 14px;
	color: var(--greyColor);
	line-height: 1.5;
}
/* ====App data safety box CSS styling end=======*/

/* ====App rating-reviews CSS styling start======*/
.rating-buttons {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.rate-button {
	background-color: #fff;
	color: var(--greyColor);
	border: 1px solid var(--borderColor);
	border-radius: 20px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	height: 36px;
	display: flex;
	align-items: center;
	gap: 8px;
	text-transform: capitalize;
}

.rate-button:hover {
	background-color: var(--subWhiteColor);
}

.rate-button.active {
	background-color: #a7d1c5;
	color: var(--greenColor);
}

.rate-button i {
	font-size: 22px;
}
/* ====App rating-reviews CSS styling end========*/

/* ====App rating-overview CSS styling start=====*/
.rating-overview {
	display: flex;
	gap: 24px;
	margin-bottom: 16px;
	align-items: flex-start;
}

.rating-overview .left-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 120px;
}

.rating-overall {
	font-size: 100px !important;
	font-weight: 700;
	color: #202124;
	line-height: 1;
	margin-bottom: 2px;
	text-align: center;
	font-family: Roboto, Arial, sans-serif;
}

.rating-stars {
	color: var(--greenColor);
	font-size: 24px;
	text-align: center;
	margin-bottom: 2px;
	font-family: Roboto, Arial, sans-serif;
}

.rating-reviews {
	font-size: 14px;
	color: var(--greyColor);
	text-align: center;
	font-family: Roboto, Arial, sans-serif;
}

.right-side {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.rating-item {
	display: flex;
	align-items: center;
}

.rating-label {
	width: 24px;
	font-size: 12px;
	color: var(--greyColor);
	text-align: right;
}

.rating-bar {
	background-color: #e8eaed;
	height: 8px;
	flex: 1;
	margin-left: 8px;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}

.rating-fill {
	background-color: var(--greenColor);
	height: 100%;
	border-radius: 4px;
}

.review {
	border-top: 1px solid var(--borderColor);
	padding: 10px 0;
	position: relative;
}

.reviews-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.review .size-post-thumbnail {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 12px;
}

.review-user {
	font-size: 14px;
	font-weight: 500;
	margin-right: 8px;
	color: #202124;
}

.review-menu {
	font-size: 18px;
	color: var(--greyColor);
	cursor: pointer;
}

.review-stars {
	color: var(--greenColor);
	font-size: 14px;
	margin-bottom: 4px;
}

.review-date {
	font-size: 12px;
	color: var(--greyColor);
}

.review p {
	font-family: 'Nirmala UI', 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 14px;
	color: var(--greyColor);
	line-height: 1.5;
	margin-bottom: 8px;
}

.review-helpful {
	font-size: 12px;
	color: var(--greyColor);
	display: flex;
	align-items: center;
	gap: 8px;
}

.rate-confirm {
	background-color: #fff;
	color: var(--greyColor);
	border: 1px solid var(--borderColor);
	border-radius: 20px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	margin: 0 10px;
}

.rate-confirm:hover {
	background-color: var(--subWhiteColor);
}

.review-response {
	background-color: var(--subWhiteColor);
	padding: 12px;
	border-radius: 4px;
	margin-top: 8px;
	margin-left: 24px;
}

.response-header {
	font-size: 12px;
	font-weight: 500;
	color: #202124;
	margin-bottom: 4px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.response-text-area span {
	font-size: 12px;
	color: var(--greyColor);
	line-height: 1.5;
}
/* ====App rating-overview CSS styling end=======*/

/* ========App Supports CSS styling start========*/
.app-support .section-title .fa-chevron-up {
	margin-left: auto;
	color: var(--greyColor);
	font-size: 11px;
	cursor: pointer;
	transition: 0.2s;
	transform: rotate(0deg);
}

.app-support .section-title .fa-chevron-up.rotate {
	transform: rotate(-180deg) !important;
}

.content-info {
	max-height: 0;
     overflow: hidden;
     opacity: 0;
     transition: 0.2s;
}

.content-info.active {
	max-height: 260px;
	opacity: 1;
}

.content-info .item {
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--borderColor);
}

.content-info .item i {
	color: var(--greenColor);
	font-size: 20px;
	margin-right: 12px;
}

.info-text {
	display: flex;
	flex-direction: column;
	align-items: start;
}

.info-title {
	font-size: 14px;
	font-weight: 500;
	color: #202124;
}

.info-text a {
	color: #1a73e8;
	text-decoration: none;
}

.info-subtitle {
	font-size: 12px;
	color: #5f6368;
}
/* ========App Supports CSS styling end==========*/

/* =========App footer CSS styling Start ========*/
.top-footer {
	background-color: var(--subWhiteColor);
	padding: 24px 16px;
	border-top: 1px solid var(--borderColor);
	margin-top: 24px;
}

.google-play {
	margin-left: 50px;
}

.top-footer h3 {
	font-size: 16px;
	font-weight: 500;
	color: #202124;
	margin-bottom: 12px;
}

.top-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.top-footer ul li {
	margin-bottom: 8px;
}

.top-footer ul li a {
	color: var(--greyColor);
	text-decoration: none;
	font-size: 14px;
}

.top-footer ul li a:hover {
	color: var(--greenColor);
	text-decoration: underline;
}

.responsive-footer {
	display: none;
}

.footer-border {
	width: 100%;
	height: 3px;
	background: var(--greenColor);
	position: fixed;
	bottom: 0;
	left: 0;
}
/* =========App footer CSS styling end ==========*/