/* 
 * Styling for Pricing Page/Table
 */

/*  =======================================================
		# Pricing Select Button
======================================================= */
.pricing-select-area .ps-label { background-color: #FFF; border: 1px solid #F1F1F1; border-radius: 30px; color: #1B1B1B; font-family: "Roboto"; font-size: 15px; font-weight: 400; line-height: 1.5em; text-transform: capitalize; padding: 15px 25px; text-align: center; position: relative; max-width: 250px; cursor: pointer; margin: 0 auto; box-shadow: 0 4px 4px 0 rgba(0, 0, 0,  5%); }
.pricing-select-area .ps-label::after { content: ''; background-image: url('../images/down-caret-yellow.svg'); background-size: 20px auto; background-position: center right; background-repeat: no-repeat; width: 30px; height: 20px; display: inline-block; vertical-align: middle; }
.pricing-select-area .ps-label:hover, .pricing-select-area .ps-label:focus, .pricing-select-area .ps-label:active { background-color: #F0B230; border-color: #F0B230; }
.pricing-select-area .ps-label:hover::after, .pricing-select-area .ps-label:focus::after, .pricing-select-area .ps-label:active::after { background-image: url('../images/down-caret-black.svg'); }
.pricing-select-area .ps-list { display: flex; flex-direction: row; padding: 15px 0 0; column-gap: 20px; justify-content: center; height: 0; overflow: hidden; transition: all 0.5s; }
.pricing-select-area .ps-list a { border: 1px solid #1B1B1B; border-radius: 10px; background: #FFF; color: #1B1B1B; font-family: "Roboto"; font-size: 15px; font-weight: 700; line-height: 1.5em; text-transform: uppercase; position: relative; padding: 10px 15px; }
.pricing-select-area .ps-list a:hover, .pricing-select-area .ps-list a:focus, .pricing-select-area .ps-list a:active, .pricing-select-area .ps-list a.active { background-color: #F0B230; }
.pricing-select-area .ps-list a span { background-color: #FFF; border: 1px solid #F1F1F1; border-radius: 5px; width: 20px; height: 20px; position: absolute; left: 0; top: 0; position: relative; display: inline-block; vertical-align: middle; margin: 0 5px 1px 0 }
.pricing-select-area .ps-list a span::before { content: ''; background-color: #fff; width: 10px; height: 10px; top: 3px; left: 4px; position: absolute; border-radius: 100%; overflow: hidden; }
.pricing-select-area .ps-list a.active span::before { background-color: #F0B230; }


/*  =======================================================
		# Pricing Table
======================================================= */
.pricing-outer { display: flex; flex-direction: row; flex-wrap: nowrap; position: relative; overflow: hidden; }
.pricing-outer .pricing-area { background: #FFF; border: 1px solid #D9D9D9; border-radius: 10px; overflow: hidden; padding: 25px; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; flex: 1 0 100%; position: relative; transform: translateX(100%); transition: all 0.5s; }
.pricing-outer .pricing-area[data-no="1"] { left: -100%; }
.pricing-outer .pricing-area[data-no="2"] { left: -200%; }
.pricing-outer .pricing-area[data-no="3"] { left: -300%; }
.pricing-outer .pricing-area.prev { transform: translateX(-100%); }
.pricing-outer .pricing-area.active { transform: translateX(0); }
.pricing-area h3 { margin: 0; padding: 0 0 5px; color: #1B1B1B; font-family: "Roboto"; font-size: 20px; font-weight: 700; line-height: 1.5em; text-transform: capitalize; }
.pricing-area .pa-price { margin: 0; padding: 0; color: #4A4A4A; font-family: "Roboto"; font-size: 20px; font-weight: 700; line-height: 1.5em; }
.pricing-area .pa-button { padding: 25px 0; }
.pricing-area .pa-button a { display: inline-block; background-color: #1B1B1B; border: 1px solid #1B1B1B; border-radius: 30px; color: #FFF; font-family: "Roboto"; font-size: 15px; font-weight: 700; line-height: 1.5em; padding: 8px 20px; text-transform: uppercase; }
.pricing-area .pa-button a:focus, .pricing-area .pa-button a:hover, .pricing-area .pa-button a:active { background-color: #F0B230; border-color: #F0B230; color: #1B1B1B; }
.pricing-area .pa-bottom { background-color: #F1F1F1; border-radius: 10px; overflow: hidden; padding: 25px 15px; }
.pricing-area .pa-bottom .pa-description { border-bottom: 1px solid #F1F1F1; padding: 0 0 10px 10px; }
.pricing-area .pa-bottom .pa-description p { color: #4A4A4A; font-family: "Roboto"; font-size: 15px; font-weight: 400; line-height: 1.5em; position: relative; margin: 0; padding: 0 0 15px 15px; }
.pricing-area .pa-bottom .pa-description p::before { content: ''; background-color: #4A4A4A; border-radius: 100%; position: absolute; width: 5px; height: 5px; left: 0; top: 6px; }
.pricing-area .pa-bottom .pa-company { padding: 25px 0 0 10px; }
.pricing-area .pa-bottom .pa-company p { color: #4A4A4A; font-family: "Roboto"; font-size: 15px; font-weight: 400; line-height: 1.5em; margin: 0; padding: 0 0 10px; }
.pricing-area .pa-bottom .pa-company .pa-company-image { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 30px; row-gap: 30px; }
.pricing-area .pa-bottom .pa-company .pa-company-image img { max-width: 60px; height: auto; }
.pricing-area .pa-year-data { display: none; }
.pricing-nav { display: none }

/*  =======================================================
		# Reponsive Style Min Width - Mobile First
======================================================= */
/* ======================[ Min Width: 768px ]====================== */
@media ( min-width: 768px ) {

	/* -----------------[ # Pricing Select Button ]----------------- */
	.pricing-select-area .ps-label { margin: 0; font-size: 16px; }
	.pricing-select-area .ps-label::after { background-size: 25px auto; }
	.pricing-select-area .ps-list { justify-content: start; }
	.pricing-select-area .ps-list a { font-size: 16px; }

	/* -----------------[ # Pricing Table ]----------------- */
	.pricing-outer { flex-wrap: wrap; column-gap: 25px; row-gap: 25px; }
	.pricing-outer .pricing-area { width: 48%; flex: auto; transform: translateX(0); }
	.pricing-outer .pricing-area[data-no="1"], .pricing-outer .pricing-area[data-no="2"], .pricing-outer .pricing-area[data-no="3"] { left: 0; }
	.pricing-area h3, .pricing-area .pa-price { font-size: 25px; }
	.pricing-area .pa-button a, .pricing-area .pa-bottom .pa-description p, .pricing-area .pa-bottom .pa-company p { font-size: 16px; }
	.pricing-area .pa-bottom .pa-description p::before { top: 8px; }
	.pricing-area .pa-button a { font-size: 16px; padding: 12px 30px; }
	.pricing-area .pa-bottom .pa-company .pa-company-image img { max-width: 100px; }

}

/* ======================[ Min Width: 1024.99px ]====================== */
@media ( min-width: 1024.99px ) {

	/* -----------------[ # Pricing Select Button ]----------------- */
	.pricing-select-area .ps-label::after { background-size: 30px auto; }
	.pricing-select-area .ps-label::after { width: 40px; }
	.pricing-select-area .ps-list a { font-size: 18px; }

	/* -----------------[ # Pricing Table ]----------------- */
	.pricing-area h3, .pricing-area .pa-price { font-size: 30px; }

}

/* ======================[ Min Width: 1200.99px ]====================== */
@media ( min-width: 1200.99px ) {

	/* -----------------[ # Pricing Select Button ]----------------- */
	.pricing-select-area .ps-label { font-size: 21px; }
	.pricing-select-area .ps-list a { font-size: 21px; }

	/* -----------------[ # Pricing Table ]----------------- */
	.pricing-outer { flex-wrap: nowrap; row-gap: 0; }
	.pricing-outer .pricing-area { width: 23%; }
	.pricing-area h3, .pricing-area .pa-price { font-size: 32px; }
	.pricing-area .pa-bottom .pa-description p::before { height: 7px; width: 7px; top: 13px; }
	.pricing-area .pa-button a { font-size: 18px; }

}

/* ======================[ Min Width: 1400.99px ]====================== */
@media ( min-width: 1400.99px ) {

	/* -----------------[ # Pricing Table ]----------------- */
	.pricing-area .pa-button a { font-size: 20px; padding: 12px 40px; }

}

/*  =======================================================
		# Reponsive Style Max Width - Mobile Last
======================================================= */
/* ======================[ Max Width: 767.98px ]====================== */
@media ( max-width: 767.98px ) {

	/* -----------------[ # Pricing Table ]----------------- */
	.pricing-nav { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 15px 0 0; }
	.pricing-nav a { display: block; width: 40px; height: 40px; border: 1px solid #D9D9D9; border-radius: 5px; background-color: #FFF; background-repeat: no-repeat; background-size: 20px auto; background-position: center center; }
	.pricing-nav a:hover, .pricing-nav a:active, .pricing-nav a:focus { background-color: #F0B230; }
	.pricing-nav a.price-prev { background-image: url('../images/arraw-left.svg'); }
	.pricing-nav a.price-next { background-image: url('../images/arraw-right.svg'); }
	.pricing-nav a.price-prev[data-active="0"] { cursor: not-allowed; opacity: 0.3; }
	.pricing-nav a.price-next[data-active="3"] { cursor: not-allowed; opacity: 0.3; }

}