/*!
Theme Name: Easy Calculator
Theme URI: https://easycalculator.tech/
Author: Easy Calculator
Author URI: https://easycalculator.tech/
Description: Easy Calculator is a clean and modern WordPress theme tailored for creating interactive calculators and tools. Designed for developers, businesses, and bloggers, this theme offers seamless integration with custom calculators, ensuring a user-friendly experience. Its responsive design guarantees optimal performance across all devices, while its lightweight structure ensures fast loading times.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: Easy Calculator
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Easy Calculator is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
- Normalize
- Box sizing
# Base
- Typography
- Elements
- Links
- Forms
## Layouts
# Components
- Navigation
- Posts and pages
- Comments
- Widgets
- Media
- Captions
- Galleries
# plugins
- Jetpack infinite scroll
# Utilities
- Accessibility
- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}

a {
	text-decoration: none;
}

.singlecattext h2, .singlecattext h1, .singlecattext h3{
	text-align: left;
}

:root {
	--primary-color: #e55c22;
	--secondary-color: #000000;
	--accent-color: #ffcebd;
	--background-color: #ffefeb;
}

body {
	overflow-x: hidden;
	background-color: var(--background-color) !important;
	position: static !important;
	width:100%;
	max-width:none;
}

body.home {
	background-color: white !important;
}

body .ctaBannerStart {
	display: none;
}

body.home .ctaBannerStart {
	display: block;
}

body.search main {
	margin: 6rem 8rem;
}

footer {
	background-color: white;
	padding: 2rem 0;
}

body.home footer {
	padding: 0;
}

.displayFlexCon {
	display: flex;
	align-items: center;
}

.flexColCon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

}

.maincontainer {
	width: auto;
	max-width: 1920px;
	margin: auto;
}

.sectionMainContent {
	width: 75%;
	margin: auto;
}

header .menuIcon,
header .crossIcon,
.sideTabs .searchClose,
.sideTabs .mobilesearchBox {
	display: none;
}

.twocolRow {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* Buttons */

.buttonGroup {
	margin-top: 1.5rem;
	gap: 1.3rem;
}

.lightButton {
	display: flex;
	margin: auto;
	background-color: white;
	color: var(--primary-color);
	padding: .5rem 1rem;
	font-weight: 500;
	font-size: 17px;
	border-radius: 8px;
	white-space: nowrap;
	transition: all .2s ease-in-out;
	z-index: 9;
}

.lightButton:hover {
	background-color: whitesmoke;
}

.lightButton img {
	width: 18px;
	margin-left: 5px;
}


.blueButton {
	display: flex;
	margin: auto;
	background-color: var(--primary-color);
	color: white;
	padding: .5rem 1rem;
	font-size: 17px;
	font-weight: 300;
	border-radius: 8px;
	justify-content: space-between;
	align-items: center;
	white-space: nowrap;
	transition: all .2s ease-in-out;
}

.blueButton:hover,
.catsubcats .catviewButton:hover {
	background-color: #b93c06e1;
}

.blueButton:active,
.catsubcats .catviewButton:active {
	background-color: #b93c06e1;
}

.mainNavBar ul .menu-item-has-children a,
.footerContent ul .activeNavLink {
	color: var(--primary-color);
	font-weight: 600;
}

.sub-menu a {
	color: var(--secondary-color) !important;
}

.Calswicthes {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid var(--accent-color);
	border-radius: 8px;
	display: none;
}

.Calswicthes button {
	border: none;
	outline: none;
	padding: .7rem 1.5rem;
	font-size: 15px;
	font-weight: 600;
	color: black;
	transition: background-color 0.3s ease;
}

.simplecalBtnAppear {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	background-color: var(--background-color);
}

.equationBtnAppear {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	background-color: white;
}

/* Header */

header {
	max-width: 1920px;
	margin: auto;
	position: absolute;
	top: 2rem;
	left: 0;
	right: 0;
	z-index: 99;
	display: flex;
	justify-content: center;
	width: 100%;
}

.mainHeader {
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	max-width: 75%;
	margin: auto;
	background-color: white;
	border-radius: 10px;
	padding: 1rem 2rem;
	position: relative;
	z-index: 10;
	width: 90%;
}

.mainNavBar ul {
	display: inline-flex;
}

.mainNavBar ul li {
	list-style-type: none;
	padding: 0 10px;
}

.mainNavBar ul a {
	color: var(--secondary-color);
	font-weight: 500;
	transition: all .2s ease-in-out;
	font-size: 15px;
	transition: all .2s ease-in-out;
}

.footerContent ul a:hover,
.mainNavBar ul li a:hover {
	color: var(--primary-color);
}

.mainNavBar ul .current-menu-item a,
.footerContent ul .current-menu-item a {
	color: var(--primary-color);
	font-weight: 600;
}

.menu-item-has-children {
	display: flex;
	align-items: end;
	color: var(--primary-color);
	cursor: pointer;
}

li.menu-item-has-children a {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 3px;
}

li.menu-item-has-children a i {
	margin: 0 !important;
	line-height: normal;
}
.sub-menu {
	position: absolute;
	top: 6rem;
	left: 50%;
	right: 50%;
	transform: translate(-50%,-10%);
	border-radius: 10px;
	background-color: white;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
	padding: 1rem;
	width: 90%;
	max-height: 250px;
	flex-wrap: wrap;
	flex-direction: column;
}

.mainNavBar ul .menu-item-has-children:hover .sub-menu {
	opacity: 1;
	visibility: visible;
	/*     transform: translateY(0); */
}

.mainNavBar .sub-menu li {
	padding: 10px;
	width: auto;
	border-radius: 10px;
	transition: all .2s ease-in-out;
	margin: .2rem 0;
	white-space: nowrap;
}

.mainNavBar .sub-menu li:hover {
	background-color: var(--background-color);
}
.menu-item-has-childrenbtn {
	justify-content: center;
	align-items: end;
	display: flex;
}

.logo {
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo img {
	width: 200px;
}

.mainHeroSection {
	position: relative;
	padding: 1rem .5rem;
	margin-bottom: 10rem;
}

.heroBanner {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	border-radius: 25px;
	display: flex;
	text-align: center;
	flex-direction: column;
	gap: 0;
}

#searchform {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--primary-color);
	border-radius: 8px;
	padding: 7px;
	margin: 0 auto;
}
.searchBox{
	position: relative;
}
.liveSearchData{
	position: absolute;
	background: white;
	padding: .5rem;
	width: 100%;
	border-radius: 8px;
	display: none;
	text-align: left;
	flex-direction:column;
	gap:.5rem;
	align-items: start;
	justify-content:center;
	box-shadow: 0px 5px 15px #e55c2273;
	font-size:13px;
	overflow-y: auto;
	justify-content: start;
}
.liveSearchData a{
	color: black;
	font-size:13px;
	transition: all .2s ease-in-out;
}
.liveSearchData a:hover{
	color: var(--primary-color);
}
.searchInput {
	border: none;
	outline: none;
	flex-grow: 1;
	width: 100%;
}

.searchInput:focus {
	border: none;
	outline: none;
}

.searchIcon,
.languageIcon {
	width: 15px;
	cursor: pointer;
}

.sideTabs {
	gap: 15px;
}

.languagesTab {
	gap: 7px;
	cursor: pointer;
}

.heroContent {
	margin-top: 10rem;
	text-align: center;
	padding: 2rem;
}

.heroMainHead {
	margin: auto;
	color: white;
	font-size: 2.7rem;
	max-width: 600px;
	font-weight: 600;
	line-height: 50px;
	text-transform: capitalize;
}

.heroMainHead span {
	color: var(--primary-color);
}

.heroContent p {
	font-size: 15px;
	margin: auto;
	margin-top: .7rem;
	text-align: center;
	color: white;
	max-width: 1100px;

}

/* Math Cal */

.heroCal{
	margin-bottom: -10rem;
	z-index: 2;
}
.mathcalculator {
	background: white;
	border-radius: 17px;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
	max-width: 900px;
	margin: 50px auto;
	padding: 20px;
}

.calmaininputs {
	border: 1px solid var(--accent-color);
	border-radius: 17px;
	display: flex;
	flex-direction: column;
}

.calmaininputs input {
	border-radius: 13px;
	padding: 5px;
	color: var(--secondary-color);
	background: none;
	border: none;
	font-size: 2rem;
	font-weight: 600;
	text-align: right;
	width: 100%;
	outline: none;
}

.calInputRow input::placeholder {
	color: var(--accent-color);
	font-size:2rem;
}

#equation input {
	color: var(--secondary-color) !important;
}

.answerRow {
	background-color: var(--background-color);

}

.answerRow input {
	color: var(--primary-color);
}

.Calbuttons {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
	margin-top: 20px;

}

button.calBtn {
	border: 1px solid var(--accent-color);
	background: #fff;
	padding: 10px 25px;
	border-radius: 8px;
	font-size: 1.2rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease;
	max-width: 88px ;
	color: black;
}

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

button.calBtn:active {
	background: #e0e0e0;
}

button.equalcalBtn {
	background: var(--primary-color);
	color: white;
	border: none;
}

button.equalcalBtn:hover {
	background: var(--primary-color);
	color: white;
}

button.numberInput {
	background-color: var(--accent-color);
}

.calInputRow {
	color: var(--accent-color);
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 1rem;
	border-radius: 14px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.raddegbtn {
	grid-column: span 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid var(--accent-color);
	border-radius: 8px;
}

body .active {
	background: var(--background-color);
}

.raddegbtn button {
	border: none;
}

.raddegbtn .radbtn {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	width: 100%;
}

.raddegbtn .degbtn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	width: 100%;
}

.calInputRow input {
	text-align: right;
}

/* topCals */

.topCals {
	padding: 20px;
	border: 1px solid var(--accent-color);
	border-radius: 10px;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 9;
}

.topCals h2 {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--secondary-color);
}

.topCalsFlex {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: end;
	justify-content: end;
}

.blueButton {
	margin: 0;
}

.blueButton img {
	width: 18px;
	height: 18px;
	margin-left: 5px;
}

.topCalsFlex .blueButton:last-child {
	margin-right: 5rem;
}


/* Bows by Cat */

.browseByCat {
	margin-top: 3.8rem;
}

.browseByCat h2 {
	font-size: 2rem;
	text-align: center;
}

.catcalFlex {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.5rem;
	gap: 1.5rem;
	justify-content: center;

}

.browseCalculator .browsCalIcon {
	width: 135px;
	border: 2px solid var(--accent-color);
	border-radius: 17px;
	padding: 1.5rem;

}

.browseCalculator {
	margin-top: 1.7rem;
	gap: .5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}

.browseCalculator .Caltype {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 30px;
}

.browseCalculator .calsmalltext {
	font-size: 13px;
}

/* Categories Section */

.calCategoriesSection {
	margin-top: 4rem;
	display: flex;
	flex-direction: column;
	gap: 2.3rem;
}

.calCategoriesSection .sectionMainContent {
	display: flex;
	flex-direction: column;
	gap: 2.3rem;
}

.calcategory {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.calCategoriesSection .catHeader {
	display: flex;
	align-items: center;
	gap: .7rem;
}

.catHeader .caticon {
	width: 54px;
	background-color: var(--primary-color);
	padding: 12px;
	border-radius: 8px;
}

.catHeader .catTitle {
	background-color: var(--primary-color);
	color: white;
	padding: 10px;
	padding-left: 1rem;
	font-weight: 500;
	font-size: 23px;
	border-radius: 8px;
	width: 100%;
}

.calcategory .catdesc {
	font-size: 14px;
	font-weight: 500;
	margin-left: 1.2rem;
}

.calcategory .catsubcats {
	border-radius: 8px;
	gap: .5rem;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.catsubcats .catsubcat {
	background-color: white;
	padding: .5rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--accent-color);
	transition: all .2s ease-in-out;
}

.catsubcat:hover {
	background-color: var(--background-color);
}

.catsubcat a {
	color: var(--secondary-color);
	font-weight: 500;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	white-space: wrap;
}

.catsubcat img {
	width: 18px;
}

.catsubcat span {
	color: var(--primary-color);
	font-size: 23px;
}

.catsubcats .catviewButton {
	background-color: var(--primary-color);
}

.catviewButton a {
	color: white;
}

/* Footer */
.ctaBannerStart {
	background-image: url('CTA/CTA art.svg');
	background-size: contain;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
}

.ctaBannerStart {
	position: relative;
	margin-top: 2rem;
}

.ctaBanner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ctaBanner .ctaBannerText {
	text-align: center;
	font-size: 2rem;
	font-weight: 500;

}

.ctaBannerText span {
	font-weight: 700;
}

.footerContent {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.2rem;
	margin-top: 1.7rem;
	padding: 0 1rem;
}

.footerContent .footerLogo {
	width: 360px;
}

.footerText {
	text-align: center;
	max-width: 600px;
	font-size: 15px;
	font-weight: 500;
}

.footerContent ul {
	display: inline-flex;
}

.footerContent li {
	list-style-type: none;
	padding: 0 10px;
}

.footerContent li a {
	transition: all .2s ease-in-out;
	color: var(--secondary-color);
	font-weight: 500;
}

.footerContent hr {
	width: 60%;
	border-top: 1px solid var(--accent-color);
}

.copyRightText {
	color: grey;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 2.5rem;
	text-align: center;
}

@media (min-width:1700px) {
	.ctaBanner .ctaBannerText {
		font-size: 1.9rem;
		max-width: 700px;
	}
}

@media (min-width:1700px) {
	.topCalsFlex a {
		flex: 0 0 calc(30.33% - 1rem);
		/* Each item takes 1/3 of the width, minus gap */
	}
}

@media (max-width:1220px) {
	.ctaBanner .ctaBannerText {
		font-size: 20px;
	}

	.topCalsFlex .blueButton:last-child {
		margin-right: 0;
	}

	.mainHeader, .sectionMainContent, .breadcrumbs{
		max-width: 100%;
		width: 90% !important;
	}
}

@media (max-width: 1020px) {
	.topCals {
		margin: 1rem;
	}
}

@media (max-width:990px) {
	.maincontainer .sectionMainContent {
		width: 90% !important;
		margin: auto;
	}
	.singlecatpageTitle {
		font-size: 2.5rem !important;
	}
	.searchBox,
	.searchInput,
	.searchbtn,
	.languagesTab img {
		display: none;
	}

	.sideTabs .mobilesearchBox {
		display: flex;
		max-width: none;
		width: auto;
	}
	.mainHeader{
		position: relative;
	}
	.liveSearchData{
		top:6rem;
		left: 0;
	}

	.mainHeader {
		height: 80px;
	}

	.footerContent li {
		padding: 0 8px;
	}

	.footerContent li a {
		font-size: 15px;
	}

	.mainNavBar {
		display: none;
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 0rem;
		right: -9rem;
		background-color: white;
		border-radius: 10px;
		height: auto;
		padding: 1rem;
		box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
		transition: .2s ease-in-out;
		width: 100%;
	}

	.mainNavBar ul {
		flex-direction: column;
		height: 100%;
		width: 100%;
		text-align: start;
	}

	.mainNavBar ul li {
		padding: 0;
	}

	header .menuIcon,
	header .crossIcon {
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--primary-color);
	}

	header .menuIcon span,
	header .crossIcon span,
	.searchClose {
		font-size: 2rem;
		color: var(--primary-color);
	}

	.searchClose {
		font-size: 1.5rem;
	}

	header .crossIcon {
		justify-content: end;
		padding-top: .8rem;
	}

	.menu-item-has-children {
		flex-direction: column;
		align-items: flex-start;
	}


	ul .sub-menu {
		margin-top: 1rem;
		top: 0rem;
		left: 0rem;
		position: relative;
		visibility: visible;
		opacity: 1;
		display: none;
		box-shadow: none;
		transform: translateY(0);
		width: 100%;
		text-align: center;
		transition: all .2s ease-in-out;
		max-height: none !important;
		padding: 0rem;
	}

	.calcategory .catsubcats {
		grid-template-columns: 1fr 1fr;
	}

	.searchInput {
		display: none;
		width: 50%;
	}

	.topCals {
		flex-direction: column;
		gap: 1.5rem;
	}

	.topCals h2 {
		text-align: center;
		max-width: inherit;
	}

	.topCalsFlex .blueButton:last-child {
		margin-right: 0rem;
	}

	.topCals h3 {
		margin-bottom: 15px;
	}

	.blueButton {
		flex: 1 1 calc(50% - 10px);
	}

	.calcategory {
		gap: 2rem;
	}
}


@media (max-width:768px) {
	.blogPosts{
		grid-template-columns: 1fr 1fr !important;
	}
	.likebtn span, .dislikebtn span{
		font-size:17px;
	}
	.likebtn svg, .dislikebtn svg{
		width: 20px;
		height: 20px;
	}
	.sharebtn span{
		font-size: 19px;
	}
	.postheader{
		flex-direction: column;
	}
	.breadcrumbs{
		width: 100%;
		text-align: center;
	}
	.calcategory .catsubcats {
		grid-template-columns: 1fr;
	}

	.heroContent {
		padding: 1rem;
	}

	.mathcalculator {
		width: 100%;
	}

	button.calBtn {
		padding: 10px;
		font-size: 1rem;
	}


	.blueButton img {
		width: 18px;
		height: 18px;
	}

	.footerContent .footerLogo {
		width: 250px;
	}

	.ctaBanner .ctaBannerText {
		font-size: 1.1rem;
	}

	.ctaBanner {
		width: 50%;
	}
}

@media (max-width:680px) {
	.sociallinks button{
		font-size:13px !important;
	}
	#exampleModalLabel{
		font-size:18px !important;
	}
	.ctaBannerStart {
		background-image: url(<?php echo esc_url($cta_image_for_mobile['url']; ?>);
		background-position: center;
		background-size: contain;
	}

	.ctaBanner {
		width: 83%;
	}

	.ctaBanner .ctaBannerText {
		font-size: 1.4rem;
	}
}

@media (max-width:550px) {
	.topCals {
		margin-top: 12.5rem !important;
	}
	.calcualtorimpButtons{
		margin-bottom: -3rem;
	}
	.fullscreencalpage{
		margin-top: 1.3rem !important;
	}
	.relatedBlogs{
		grid-template-columns:1fr !important
	}
	body.page-template-page-fullscreen-calculator .mathcalculator{
		margin: 20px auto;
	}
	.mathcalculator {
		height: 431px;

	}

	.Calswicthes {
		display: flex;
		max-width: 141px;
		margin: auto;
	}

	.Calbuttons {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.calmaininputs input {
		padding: 5px;
		font-size: 1.6rem;
	}

	.equationBtn {
		display: none;
	}
	.flexbutton{
		display: flex !important;
		align-items:center;
		justify-content: center;
	}
	.ctaBannerStart {
		height: 150px;
	}

	.ctaBanner {
		width: 80%;
	}

	.ctaBanner .ctaBannerText {
		font-size: .8rem;
	}

	.mainHeader {
		justify-content: center;
	}

	.logo img {
		width: 160px;
	}

	.searchIcon,
	.languageIcon {
		width: 10px;
	}

	.mobilesearchBox {
		padding: 5px;
	}

	header .menuIcon span,
	header .crossIcon span,
	.searchClose {
		font-size: 1.5rem;
	}
}


@media (max-width:420px) {
	.buttonGroup {
		flex-direction: column-reverse;
	}

	.mainHeader {
		padding: 1rem;
	}

	.mainHeroSection {
		padding: .5rem;
	}
}

@media (max-width:365px) {
	.catsubcat a {
		white-space: wrap;
	}
}


/* Contact Form */

.wpcf7 {
	width: 100%;
}

.contactSection {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
}

.contactDetails {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap:1rem;
	flex: 1;
}

.contactDetails h2 {
	font-size: 2rem;
}

.mainContactform {
	display: flex;
	justify-content: center;
	align-items: center;
}

.mainContactform form {
	background-color: var(--background-color);
	border: 1px solid var(--primary-color);
	border-radius: 8px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

form .twoInputs p {
	display: flex;
	gap: .5rem;
}

form .twoInputs p span {
	width: 100%;
}

.twoInputs input {
	width: 100%;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid var(--primary-color);
	outline: none;
}

form textarea {
	padding: 10px;
	border-radius: 8px;
	border: 1px solid var(--primary-color);
	outline: none;
	resize: none;
	height: 150px;
	width: 100%;
}

form .submitbutton {
	margin-top: 1rem;
	background: var(--primary-color);
	color: white;
	border-radius: 8px;
	outline: none;
	padding: .5rem 1rem;
	border: none;
	cursor: pointer;
	transition: all .3s ease-in-out;
	display: flex;
	align-items: center;
	justify-content:space-between;
	gap:1.5rem;
}

form .submitbutton:hover {
	background-color: #b93c06e1;
}

@media (max-width:960px) {
	.postSidebar{
		display:none !important;
	}
	.postContent{
		width: auto !important;
	}
	.contactSection {
		flex-direction: column-reverse;
	}
}


@media (max-width:680px) {
	.twoInputs p {
		flex-direction: column;
	}
}



/* catpage */
.catPageContent {
	margin-top: 0rem;
	margin-bottom: 6rem;
}

.catpageTitle {
	font-size: 3rem;
	color: var(--primary-color);
	text-align: center;
}

.catpagedesc {
	text-align: center;
	width: 68%;
	margin: auto;
}

.catPageContent .catsubcat:hover {
	background-color: var(--accent-color);
}


/* Single apge */

.singlecatPage {
	margin-top: 1rem;
	margin-bottom: 6rem;
}

.singlecatPage .sectionMainContent {
	background-color: white;
	border-radius: 8px;
	padding: 3rem 1.5rem;
}

.singlecatpageTitle {
	font-size: 3.5rem;
	color: var(--primary-color);
}

.singlecatcontent {
	display: flex;
}

.anyCal {
	position: relative;
}

.singleCalcultaor {
	position: sticky;
	top: 3rem;
	left: auto;
}

.singleCalcultaor>div:first-of-type {
	margin-right: 2rem;
}

.sixminwalkCal {
	padding: 1rem;
	border: 1px solid var(--primary-color);
	border-radius: 8px;

}

.singleCalcultaor {
	min-width: 350px;
}

.Gendergroup {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	gap: 1rem;
}

.sixminwalkCal . label {
	margin-bottom: 0px;
}

.input-group {
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
}

.input-group input {
	padding: .5rem;
	border: 1px solid var(--background-color);
	border-radius: 8px;
	outline: none;
}

.labelwithspan {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 5px;
	margin-right: 5px;
}

.labelwithspan span {
	float: right;
	margin-right: 20px;
	color: var(--accent-color);
}

.calculationbtn,
.result button,
#male,
#female {
	background-color: var(--background-color);
	border: none;
	color: black;
	padding: 5px 15px;
	margin-top: 5px;
	border-radius: 5px;
	cursor: pointer;
	transition: all .2s ease-in-out;
}

button#male,
button#female {
	margin-right: 10px;
}

.calculationbtn:focus,
.calculationbtn.selected,
.sixminwalkCal button:focus,
.sixminwalkCal button.selected,
.result button:focus,
.result button.selected {
	background-color: var(--primary-color) !important;
	color: white !important;
}

.calculationbtn:hover {
	background-color: var(--primary-color) !important;
	color: white !important;
}

.result {
	margin-top: 20px;
	background-color: var(--accent-color);
	padding: 10px;
	text-align: center;
	border-radius: 8px;
}

.result label {
	display: flex;
}


.resultdata {
	background-color: white;
	border: 1px solid var(--primary-color);
	border-radius: 5px;
	display: flex;
	align-items: center;
	padding: .7rem;
	text-align: left;
}

.resultdata span {
	flex: 9;
	color: var(--primary-color);
	font-weight: 600;
	font-size: 16px;
}

.singlecattext {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 100%;
}

.singlecattext h2 {
	margin: .5rem 0;
	font-size: 2rem;
}
.singlecattext h1, .singlecattext h2, .singlecattext h3{
	line-height: 35px;
}
.singlecattext p {
	margin: .2rem;
}
.contentTabel{
	margin-bottom: .5rem;
}
.contentTabel p {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 !important;
}
.contentTabel li {
	font-weight: 600;
}


.contentTabel a {
	color: black;
}

.contentTabel .parentUl {
	background-color: var(--background-color);
	border-radius: 8px;
	padding: 1rem 2rem;
	margin-top: .8rem;
	margin-bottom: 0;
	width: 100%;
}

body .parentUl {
	counter-reset: section;
}
body li{
	margin: .4rem 0;
}
body .parentUl>li {
	counter-increment: section;
	list-style-type: none;
}

body .parentUl>li::before {
	content: counter(section) ". " !important;
}

body .childUl {
	counter-reset: subsection;
	padding-left: 1rem
}

body .childUl>li {
	counter-increment: subsection;
	list-style-type: none;
	padding-left: 1.5rem !important;
}

body .childUl>li::before {
	content: counter(section) "." counter(subsection) " " !important;
}

.relatedTopics {
	background-color: var(--background-color);
	padding: 1rem 1rem 1rem 2rem;
	margin-top: 1.5rem;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.relatedTopics h3 {
	font-size: 1.5rem;
}

.relatedbtn {
	background-color: white;
	border: 1px solid var(--accent-color);
	border-radius: 8px;
	color: var(--secondary-color);
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.relatedbtn img {
	max-width:19px;
}

.topicsLinks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
}
@media (max-width:1275px) {
	.singlecatcontent {
		flex-direction: column;
	}
	.singleCalcultaor{
		min-width: 350px;
		width: auto;
	}
	.singleCalcultaor>div:first-of-type {
		margin-right: 0;
	}
	.singleCalcultaor {
		margin-bottom: 2rem;
	}

}

@media (max-width:768px) {
	.mainContent{
		width: 100% !important;
	}
	.adContainer{
		display:none;
	}
	.blogPostTitle{
		font-size: 1.4rem !important;
		line-height: 30px !important;
	}
	.Gendergroup {
		gap: 10px;
		flex-direction: column;
	}
	.sideTabs {
		gap: 5px;
	}

	.heroMainHead {
		font-size: 1.7rem;
		line-height: 35px;
	}

	.relatedTopics {
		flex-direction: column;
		gap: 1rem;
		padding: 1rem;
	}

	.topicsLinks {
		grid-template-columns: 1fr;
		width: 100%;
	}

	.catpagedesc {
		width: 100%;
	}

	.singleCalcultaor {
		min-width: auto;
	}

	.sixminwalkCal .Gendergroup label {
		margin-bottom: 5px;
	}

	.singlecatpageTitle {
		font-size: 2rem !important;
		text-align: center;
	}

	.contentTabel h2,
	.singlecattext h2 {
		font-size: 1.5rem;
	}
}

#searchform {
	display: flex;
	align-items: center;
}

#searchform button {
	border: none;
	background: transparent;
	display: flex;
}

/* Pregnancy Calculator */

.pregnancycalculator {
	border: 1px solid var(--primary-color);
	padding: 20px;
	border-radius: 10px;
}

.pregnancycalculator label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}

.pregnancycalculator input[type="date"],
.pregnancycalculator input[type="number"],
.pregnancycalculator select {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 16px;
	outline: none;
}

.pregnancycalculatorbtn {
	width: 100%;
	padding: 10px;
	background-color: var(--primary-color);
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s;
}

.pregnancycalculatorbtn:hover {
	background-color: #b93c06e1;
}

.pregnancycalculatorresult {
	margin-top: 20px;
	background: var(--accent-color);
	padding: 1rem;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.ivf-options {
	display: none;
	margin-top: 10px;
}

.pregnancyresultdata {
	padding: 1rem;
	color: var(--primary-color);
	font-size: 17px;
	font-weight: 600;
}

/*Bsacal*/

.bsaCalc {
	padding: 1rem;
	border-radius: 8px;
	border: 1px solid var(--primary-color);
}


/* ascvd Cal */

.ASCVDcalculator {
	padding: 1rem;
	border: 1px solid var(--primary-color);
	border-radius: 8px;
}

#riskValue {
	font-weight: 600;
	font-size: 18px;
	color: var(--primary-color);
}

.input-group {
	margin-bottom: 15px;
}

.input-group label,
label {
	display: block;
	font-size: 15px;
	color: #555;
	margin-bottom: 5px;
}

.input {
	font-size: 15px;
	color: #555;
}

.input-group input,
.input-group select {
	width: 100%;
	padding: 8px;
	font-size: 14px;
	border: 1px solid #ddd;
	border-radius: 5px;
	outline: none;
}

.question {
	margin-bottom: 20px;
}

.largeLable {
	font-size: 17px;
}

.optionsqs {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.deliriumcalstart .result {
	padding: 1rem;
	color: var(--primary-color);
	font-weight: 600;
	font-size: 17px;
}


/*Abbreviated Mental Test*/

.calborder{
	padding: 1rem;
	border-radius: 8px;
	border: 1px solid var(--primary-color);
	overflow: hidden;
}

label {
	display: block;
	margin: 10px 0 5px;
}

.switch {
	display: flex;
	align-items: center;
}

.switch input {
	display: none;
}

.swicthslider {
	position: relative;
	width: 38px;
	height: 24px;
	background-color: #ccc;
	border-radius: 34px;
	cursor: pointer;
	margin-right: 10px;
	transition: background-color 0.4s;
}

.swicthslider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 4px;
	bottom: 2px;
	background-color: white;
	border-radius: 50%;
	transition: transform 0.4s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: bold;
	color: #000;
}

input:checked+.swicthslider {
	background-color: var(--primary-color);
}

input:checked+.swicthslider:before {
	transform: translateX(11px);
	content: "Yes";
	/* Change content to "Yes" when checked */
}

input:not(:checked)+.swicthslider:before {
	content: "No";
	/* Change content to "No" when unchecked */
}


.labelfield {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.results {
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
	background-color: var(--accent-color);
	padding: 1rem;
	border-radius: 8px;
}

.alertText {
	padding: .5rem ;
	border-radius: 8px;
	display: flex;
	gap: 5px;
	align-items: center;
	font-size: 13px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.alertText span {
	font-size: 17px;
}

.resultlabel {
	display: flex;
	align-items: center;
	gap: 5px;
}
body .results{
	padding: 1rem;
	color: var(--primary-color);
	font-weight: 600;
	font-size: 16px;
}

.tooltip-container {
	display: inline-flex;
	align-items: center;
	position: relative;
}

.tooltip-icon {
	cursor: pointer;
	font-size: 18px;
	margin-left: 5px;
	color: white;
	background-color: var(--primary-color);
	border-radius: 50%;
}

/* Tooltip styling */
.tooltip-text {
	visibility: hidden;
	width: 200px;
	background-color: var(--background-color);
	color: var(--secondary-color);
	box-shadow: 0px 0px 4px #ccc;
	text-align: center;
	border-radius: 5px;
	padding: 8px;
	position: absolute;
	bottom: 125%;
	/* Position the tooltip above the icon */
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 13px;
	line-height: 1.4;
	z-index: 1;
}

/* Arrow for the tooltip */
.tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	/* Position at the bottom of the tooltip */
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px;
	border-style: solid;
	border-color: var(--primary-color) transparent transparent transparent;
}

/* Show tooltip on hover */
.tooltip-container:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
}

.flexresult {
	display: flex;
	margin-top: 1rem;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
}

.flexresultchild {
	display: flex;
	flex-direction: column;
	gap: 10px;

}

.flexresultchild b {
	color: var(--primary-color);
	font-weight: 600;
	font-size: 16px;
}


#resultValue{
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

/* Hero Banner */

.heroBanner::after {
	content: "";
	position: absolute;
	bottom: -26rem;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('https://easycalculator.tech/wp-content/uploads/2024/11/Dotted-line.svg') no-repeat center center; 
	background-size: contain;
	opacity: 0.5; 
	z-index: 1; 
}
@media(min-width:1800px){
	.heroBanner::after {
		bottom: -19rem;
	}
}
@media (min-width:1400px) and (max-width:1800px){
	.heroBanner::after {
		bottom: -22rem;
	}
}
@media (max-width:1024px) and (min-width:750px){
	.heroBanner::after {
		bottom: -28rem;
	}
}
@media (max-width:750px){
	.heroBanner::after {
		display: none;
	}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Reset the counter for top-level <ol> */
.singlecattext ol {
	counter-reset: section;
}

.singlecattext ol>li {
	counter-increment: section;
	list-style-type: none;
}

.singlecattext ol li::before {
	content: counter(section) ". ";
}

.singlecattext ol li ol {
	counter-reset: subsection;
	padding-left: 1rem
}

.singlecattext ol li ol >li {
	counter-increment: subsection;
	list-style-type: none;
}

.singlecattext ol li ol >li::before {
	content: counter(section) "." counter(subsection) " ";
}
.singlecattext ul {
	list-style-type: none; /* Remove default list style */
}

.singlecattext ul > li {
	position: relative;
	padding-left: 1rem; /* Space for the dot */
}

.singlecattext ul > li::before {
	content: "•"; /* Unicode character for a dot */
	position: absolute;
	left: 0;
	color: black; /* Change color as needed */
}
.singlecattext table{
	margin-top: .5rem;
	margin-bottom: .5rem;
}
/* BreadCrumbs */
.breadcrumbs{
	width: 75%;
	margin: auto;
	margin-top: 7.7rem;
	padding: 1rem;
}

.breadcrumbs a{
	color: var(--primary-color);
}
.topinput {
	display: flex;
	padding: 5px;
	background-color: white;
	border-radius: 8px;
	align-items: center;
	border: 1px solid #ddd;
}

.topinput input {
	border: none;
	width: 100%;
}

.topinput select {
	width: auto;
	border-radius: 8px;
	background-color: var(--background-color);
	padding: 5px;
	outline: none;
	border: none;
	font-weight: 600;
	color: var(--primary-color);
	font-size: 14px;
}

.topinput select option {
	border: none;
	border-radius: 8px;
	background-color: var(--background-color);
	font-weight: 600;
	font-size: 14px;
}
.topinput select option:checked{
	background-color: var(--primary-color);
	color: white;
}
.topinput span {
	color: var(--accent-color);
	font-size: 14px;
}

.postheader{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom:2rem;
	gap:15px;
}
.likedislikebtns {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	border-radius: 50px;
	background-color: var(--background-color);
	font-size: 20px;
}

.likebtn{
	padding: 10px 15px;
	border-top-left-radius 0;
	border-bottom-left-radius 0;
	border-radius: 50px;
	background-color: var(--background-color);
	border-top-right-radius: 0;
	border-bottom-right-radius :0;
	transition: all .2s ease-in-out;
	display: flex;
	align-items: center;
	gap: 10px;
}
.likebtn:hover, .dislikebtn:hover, .sharebtn:hover{
	background-color: var(--accent-color);
}
.likebtn:hover .likedislikebtns{
	background-color: var(--accent-color);
}
.dislikebtn:hover .likedislikebtns{
	background-color: var(--accent-color);
}
.dislikebtn {
	padding: 10px 15px;
	border-radius: 50px;
	background-color: var(--background-color);
	border-top-left-radius :0;
	border-bottom-left-radius: 0;
	transition: all .2s ease-in-out;
	display: flex;
	align-items: center;
	gap: 10px;
}

.dislikebtn i{
	transform: scaleX(-1);
}
.sharebtn {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	border-radius: 50px;
	justify-content: space-between;
	cursor: pointer;
	background-color: var(--background-color);
	transition: all .2s ease-in-out;
}

.postbtns {
	display: flex;
	align-items: center;
	gap: .7rem;
}
.liked svg,
.disliked svg {
	fill: black;
}

#myModal{

	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgb(0 0 0 / 32%); /* Semi-transparent background */
	z-index: 1000; /* Ensure it is on top of other content */
	justify-content: center;
	align-items: center;
	display: flex; 
	display: none; /* Hidden by default */
}
.modal-backdrop {
	display: none !important;
	/* Optional: to prevent backdrop from showing */
}

/* Center the modal */
.modal-dialog {
	overflow-y: auto;
	margin: 0;
	/* Optional: remove extra margin */
}

.modal-dialog {
	width: 100vw;
	height: 100vh;
	background-color:rgb(0 0 0 / 32%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(0px,0px);
}

.modal-content {
	background-color: rgb(243, 244, 245);
	box-shadow: 0px 0px 5px 1px #c4c4c454;
	border-radius: 8px;
	padding: 1rem;
	max-width: 850px;
	width: 80vw;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	border-bottom: 1px solid rgb(227, 228, 237);
	padding: 1rem;
	padding-top: 0;
	margin-bottom: 1rem;
}

.modalclose {
	background: transparent;
	border: none;
	font-size: 32px;
	color: #626262;
	cursor: pointer;
}
.modalHeadings{
	width: 100%;

}
.resultcheck{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
}
.sociallinks {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.sociallinks button{
	width: 100%;
	border: none;
	border-radius: 8px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 10px;
	padding-top: 20px;
	color: white;
	font-size: 15px;
	cursor: pointer;
}
.sociallinks button:hover i {
	transform: translatey(0px);
}

.sociallinks button i{
	transform: translatey(-5px);
	font-size: 25px;
	transition: all .2s ease-in-out;
}
.sociallinks .sharefacebook{
	background-color: rgb(33, 131, 245);
}
.sociallinks .sharetwitter{
	background-color:  rgb(22, 202, 249) ;
}
.sociallinks .sharelinkedin{
	background-color: rgb(42, 139, 207);
}
.modal-footer{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: white;
	padding: 8px 10px;
	color: #858585;
	border-radius: 8px;
	gap: 15px;
}
.copyurlbtn{
	background-color: var(--primary-color);
	color: white;
	border: none;
	border-radius: 50px;
	padding: 5px 10px;
	font-size: 15px;
	cursor: pointer;
	width: 80px;
}
.copyurlbtn i{
	display: none;
}
.pageurl{
	font-size: 14px;
	max-width: 70%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.modal-title{
	font-size: 20px;
}
.genders{
	display: flex;
	align-items: center;
	justify-content:center;
	gap: 1rem;
}
.Gendergroup label{
	margin: 0!important;
}
.secondContent{
	margin-left: 40px;
}
.secondContent h1,
.secondContent h2,
.secondContent h3,
.secondContent h4,
.secondContent h5,
.secondContent h6 {
	margin-top: .4rem;
	margin-bottom: .4rem;
	line-height: 35px;
}
.secondContent li{
	margin: 
}
.thirdContent{
	margin-left: 60px;
}
.thirdContent li{
	margin: .3rem 0;
}
.thirdContent h1,
.thirdContent h2,
.thirdContent h3,
.thirdContent h4,
.thirdContent h5,
.thirdContent h6 {
	margin-top: .3rem;
	margin-bottom: .3rem;
	line-height: 25px;

}
.thirdContent p,  .secondContent p{
	margin-top: 0;
}

.fourthContent{
	margin-left: 80px;
}
.fourthContent li{
	margin: .2rem 0;
}
.fourthContent h1,
.fourthContent h2,
.fourthContent h3,
.fourthContent h4,
.fourthContent h5,
.fourthContent h6 {
	margin-top: .2rem;
	margin-bottom: .2rem;
	line-height: 20px;

}
.fourthContent p{
	margin:0;
}
.fifthContent{
	margin-left: 100px;
}
@media (max-width:768px){
	.secondContent{
		margin-left: 0px;
	}
	.thirdContent{
		margin-left: 0px;
	}
	.fourthContent{
		margin-left: 0px;
	}
}
.contactImg{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
}
.contactImg img{
	width:100%;
	max-width: 500px;
}
.page main, .blog main, .single-blog_post main,
.tax-blog_category main{
	margin-top: 8rem;
	margin-bottom: 4rem;

}
.home main{
	margin: auto;
}
.page .mainContactform form {
	padding: 0;
	border: 0;
}
.contactSectionStart{
	background-color: var(--background-color);
	margin:3rem 0;
}
.mainContactSection{
	padding: 4rem 0;
}
input::placeholder, textarea::placeholder{
	font-size: 16px;
	color: var(--accent-color);
}
.postImage {
	width: 100%;
}

.blogPosts {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.5rem;
	margin-top:3rem;
}

.singleBlogPost {
	border-radius: 10px;
	overflow: hidden;
	background-color: white;
	display: flex;
	flex-direction: column;
	color: black;
}

.postDetails {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: -webkit-fill-available;
}

.contentReadTime {
	display: flex;
	gap: 1rem;
	font-size:14px;
}

.postExtraInfo {
	display: flex;
	font-size:14px;
	justify-content: space-between;
}
.blogPageHead h1 {
	font-size: 3rem;
	color: var(--primary-color);
	text-align: center;
}
.postTitle{
	line-height:25px;
	margin:.5rem 0;
}
.postTitle a{
	font-size:1.15rem;
	margin:.7rem 0;
	color:black;
	transition: all .2s ease-in-out;
}
.postCategory a{
	color:black;
	transition: all .2s ease-in-out;
}
.postTitle a:hover,
.postCategory a:hover{
	color:var(--primary-color);
}
.blogDesc {
	text-align: center;
	width: 68%;
	margin: auto;
}
@media (max-width:600px){
	.blogPosts{
		grid-template-columns: 1fr !important;
	}
}
/* 404 page */
.error-404{
	display: flex;
	align-content: center;
	justify-content:center;
	height: 90vh;
}
.four-page-content{
	display: flex;
	align-content: center;
	justify-content:center;
	flex-direction: column;
	text-align: center;
	gap: .8rem;
}
.four-page-content h1{
	font-size: 2rem;
}
.fourbtn{
	background-color: var(--primary-color);
	color: white;
	padding: .5rem 1.2rem;
	max-width: 150px;
	margin: auto;
	margin-top: 0;
	margin-bottom: 0;
	border-radius:8px;
}
.fourbtn:hover{
	background-color: #b93c06e1;
}
/* Blog Post */

.blogPostBanner{
	display:flex;
	align-items: start;
	justify-content: start;
	flex-direction:column;
	background-color: var(--accent-color);
	padding: 1rem;
	border-radius: 8px;
	/* 	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); */
	margin-bottom:2rem;
}
.blogPostTitle{
	font-size: 2.3rem;
	font-weight:500;
	max-width:70%;
	line-height:50px;
	margin: 1rem 0;
}
.blogPostInfo{
	display:flex;
	gap:1rem;
	font-size: 13px;
}
.breadcrumbcs a{
	color:black;
}
.breadcrumbcs{
	font-size: 13px;
}
.mainBlogPost{
	display:flex;
	gap:3rem;
}
.postSidebar{
	position:relative;
	display:flex;
	width:20%;
	flex-direction:column;
}
.fixedsideBar, .mainAd{
	position:sticky;
	top:2rem;
}
.socialShares{
	display:flex;
	gap:10px;
	font-size:14px;
	height:max-content;
	align-items:center;
	justify-content:center;
	border-bottom: 1px solid var(--primary-color);
	padding-bottom: 15px;
}
.socialShares button{
	cursor:pointer;
	border:none;
	color:black;
	background-color: var(--accent-color);
	border-radius:4px;
	padding:5px;
	padding: 2px;
	width:27px;
	height:23px;
	text-align: center;
	transition:all .3s ease-in-out;
	display:flex;
	align-items:center;
	justify-content:center;
}
.socialShares button:hover{
	background-color:var(--primary-color);
}
.postContentTable{
	padding-top: 15px;
}
.postContentTable strong{
	font-size:14px;
	font-weight:500;
	margin:0;
	color: black;
}
.postContentTable a{
	font-size:12px;
	color: #f5b49e;
	transition: all .1s ease-in-out;
	display:block;
}
.postContentTable a:hover{
	color: var(--primary-color) !important; 
	font-weight:500;
}
.tablecontentlist{
	padding-top:8px;
}
.tablecontentlist li{
	list-style-type: none;
}
.adContainer{
	width:20%;
	position:relative;
}
.postContent{
	display:flex;
	gap:3rem;
}
.mainContent{
	width:80%;
}
.mainContent h1, .mainContent h2, .mainContent h3, .mainContent h4{
	margin:.5rem 0 ;
}
.mainContent p{
	margin:.3rem 0 ;
}
.mainContent h1:first-of-type,
.mainContent h2:first-of-type,
.mainContent h3:first-of-type,
.mainContent h4:first-of-type,
.mainContent h5:first-of-type,
.mainContent h6:first-of-type {
	margin-top: 0 ;
}

.postContent img{
	height:auto;
	margin:1rem 0 ;
	width:100%;
}
.relatedPosts{
	margin-top: 2rem;
}
.relatedPost{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.relatedPostshead{
	font-size:1.7rem;
	font-weight:500;
}
.relatedBlogs{
	display:grid;
	gap:2rem;
	grid-template-columns: 1fr 1fr;
	margin-top:1rem;
}
.postsHeading{
	font-weight:600;
	color:black;
	transition:all .2s ease-in-out
}
.postsHeading:hover{
	color:var(--primary-color);
}
.blogShortContent{
	font-size:13px;
	margin: 9px 0;
}
.postsExtraInfo{
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:12px;
}
.postsExtraInfo a{
	color:black;
}
.postStart{
	display:flex;
	flex-direction:column;
}
.mainContent .socialShares{
	margin-top:2rem;
	border:none;
	justify-content:start;
}
.mainContent .socialShares button{
	width: 27px;
	height: 27px;
}
.mainContent .socialShares button i{
	font-size:16px;
}
.contentbutton.active {
	color: var(--primary-color) !important; 
	font-weight:500;
}
table {
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 8px;
	border: 1px solid #dadada;
	width: 100%;
}
table, th, tr, td {
	overflow: hidden;
}

/* Apply a border to the right of all but the last column */
table th:not(:last-child),
table td:not(:last-child) {
	border-right: 1px solid #dadada;
}

/* Apply a border to the bottom of all but the last row */
table > thead > tr:not(:last-child) > th,
table > thead > tr:not(:last-child) > td,
table > tbody > tr:not(:last-child) > th,
table > tbody > tr:not(:last-child) > td,
table > tfoot > tr:not(:last-child) > th,
table > tfoot > tr:not(:last-child) > td,
table > tr:not(:last-child) > td,
table > tr:not(:last-child) > th,
table > thead:not(:last-child),
table > tbody:not(:last-child),
table > tfoot:not(:last-child),
table > thead th {
	border-bottom: 1px solid #dadada;
}

/* Remove the border-bottom specifically from the '3rd Trimester' th */
tbody tr:nth-child(7) th {
	border-bottom: none !important;
}

th, td {
	padding: .5rem;
}

tr:nth-child(even) {
	background-color: var(--background-color);
}
.liveSearchData a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.5em;
	width: 100%;
}

.liveSearchData a {
	-webkit-line-clamp: 2;
	max-height: 3em;  
}
.chart-container {
	max-width: 600px;
	margin: auto;
}
.bap65cal .result, .childpughcal .result{
	display: flex;
	flex-direction: column;
	gap:10px;
}
.childpughcal .result b{
	color: var(--primary-color);
}
.impLable{
	font-size: 18px;
	font-weight: 600;
	color: black;
}
body.page-template-page-fullscreen-calculator header, body.page-template-page-fullscreen-calculator footer{
	display: none;
}
body.page-template-page-fullscreen-calculator .mathcalculator{
	max-width: none;
}
body.page-template-page-fullscreen-calculator .mathcalculator button.calBtn{
	max-width: none;
}
body.page-template-page-fullscreen-calculator .heroCal{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 1rem;
}
.fullcalBtn{
	margin-top: 1rem;
}
.fullcalBtn a{
	color: var(--primary-color);
	font-weight: 500;
}
.fullscreencalpage img{
	max-width: 22px;
}
.fullscreencalpage {
	color: black;
	background-color: white;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid var(--accent-color);
	display: flex;
	text-align: center;
	justify-content: center;
	gap: 10px;
	max-width: 265px;
	margin: auto;
}
.completeCal{
	display: flex;
	justify-content: center;
	align-items: start;
}
.calculatorHistory{
	position: relative;
}
.historymain{
	position: absolute;
	top: 6rem;
	background: var(--primary-color);
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	height:70px;
	width: 30px;
	max-width:300px;
	transition: all .3s ease-in-out;
	overflow-x: hidden;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

.historymainActive{
	width: 17vw !important;
	height: 380px  !important;
	display: block  !important;
	background-color: white  !important;
	border-left : 1px solid var(--primary-color)  !important;
}
.historyBtn{
	border: none;
	background-color: transparent;
	transform: rotate(90deg);
	cursor: pointer;
	padding: 0px 7px;
	height: 20px;
	color: white;
	font-weight:500;
	text-transform:capitalize;
}
.homeCalHistoy{
	display: none;
	text-align: left;
	padding: 0px 17px;
	margin-top: 2.2rem;
}
.homeCalHistoy p{
	margin: 0;
	color: black;
	font-size: 13px;
	text-align: left;
}
.closeHistory{
	width: 20px;
	display: none;
	right: 0;
	position: absolute;
	margin: 10px;
	cursor: pointer;
}
@media(max-width:1180px) and (min-width:710px){
	.calmaininputs input, .calInputRow input::placeholder {
		font-size: 20px;
	}
	.mathcalculator{
		max-width:none;
		width: 55vw;
	}

	button.calBtn{
		padding: 5px 10px;
		font-size: 15px;
	}
	.historymainActive{
		height:270px !important;
	}
}
@media (max-width:710px){
	.calculatorHistory{
		display: none;
	}
}
.postid-408 .singleCalcultaor {
	min-width: 400px;
}
#scheduleTable{
	margin-top:10px;
	background-color:white;
	border-color: var(--primary-color);
}
#scheduleTable th{
	padding: 7px;
	font-size:12.5px;
	border-color: var(--primary-color);
}
#scheduleTable td{
	border-color: var(--primary-color);
	padding: 7px;
	font-size:12.5px;
}
#resultTable{
	max-height:300px;
	overflow-x: hidden;
	display:none;
}
#resultTable{
	max-height:300px;
	overflow-x: hidden;
	overflow-y: visible;
	display:none;
	scrollbar-width: none; /* For Firefox */
	-ms-overflow-style: none;
}
#resultTable::-webkit-scrollbar {
	display: none; /* For Webkit browsers like Chrome, Safari */
}

.inputsRow{
	display: flex;
	justify-content: center;
	align-items: end;
	gap:10px;
}
hr {
	margin: 20px 0;
}
.sub-menu a img{
	width: 20px;
	height: auto;
}
.sub-menu a {
	font-size : 14px !important;
}
.mainNavBar .sub-menu li:hover .comingSoonCat{
	background-color: var(--primary-color);
	color: white;
}
.comingSoonCat{
	background-color: var(--background-color);
	padding: 4px;
	border-radius: 8px;
	font-size: 9px;
	float: right;
	margin-left: 3px;
	color: var(--primary-color);
	transition : all .3s ease-in-out;
}
.hidden{
	display: none;
}
.resultWithUnit select{
	width: auto;
    border-radius: 8px;
    background-color: var(--background-color);
    padding: 5px;
    outline: none;
    border: none;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 14px;
}
#dislikeCount{
	display:none !important;
}
.input-group textarea{
	border: 1px solid #dadada;
	padding: 10px;
	border-radius: 5px;
	resize: vertical;
	height: 100px;
}
.calborder table, .calborder tbody, .calborder tr, .calborder td{
	border:none !important;
	background-color: transparent;
	width: auto;
	margin: auto;
}
.resultWithUnits select {
    width: auto;
    border-radius: 8px;
    background-color: var(--background-color);
    padding: 5px;
    outline: none;
    border: none;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 14px;
}

.resultWithUnits select option {
	border: none;
	border-radius: 8px;
	background-color: var(--background-color);
	font-weight: 600;
	font-size: 14px;
}
.resultWithUnits select option:checked{
	background-color: var(--primary-color);
	color: white;
}