/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

:root {
--white: white;
--gray: #999;
--lightgray: whitesmoke;
--darkgreen: #2e4c75;
--popular: #ffdd40;
--starter: #f73859;
--essential: #00aeef;
--professional: #ff7f45;
}

a {
text-decoration: none;
color: inherit;
}

body {
background: var(--lightgray);
}

h1 {
font-size: 3rem;
font-weight: bold;
}
h2 {
font-size: 1.4rem;
color: grey;
}


.intro-text {
padding: 50px 0px 20px 0px;
}

.intro-text a {
text-decoration: underline;
}

/* SWITCH STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.switch-wrapper {
position: relative;
display: inline-flex;
border: 1px solid lightgrey;
padding: 8px 4px 0px 4px;
margin-bottom: 40px;
border-radius: 30px;
background: var(--white);
}

.switch-wrapper [type="radio"] {
position: absolute;
left: -9999px;
}

.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"],
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"] {
color: var(--white);
}

.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"]:hover,
.switch-wrapper [type="radio"]:checked#yearly ~ label[for="yearly"]:hover {
background: transparent;
}

.switch-wrapper
[type="radio"]:checked#monthly
+ label[for="yearly"]
~ .highlighter {
transform: none;
}

.switch-wrapper
[type="radio"]:checked#yearly
+ label[for="monthly"]
~ .highlighter {
transform: translateX(100%);
}

.switch-wrapper label {
z-index: 1;
min-width: 100px;
cursor: pointer;
border-radius: 30px;
transition: color 0.25s ease-in-out;
}

.switch-wrapper label:hover {
background: var(--lightgray);
}

.switch-wrapper .highlighter {
position: absolute;
top: 4px;
left: 4px;
width: calc(50% - 4px);
height: calc(100% - 8px);
border-radius: 30px;
background: var(--darkgreen);
transition: transform 0.25s ease-in-out;
}


/* TABLE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.table-wrapper {
background: var(--white);
overflow-x: auto;
}

table {
width: 100%;
}

table tr {
display: flex;
}

table th,
table td {
width: 25%;
min-width: 150px;
}

table th:nth-child(1) {
display: flex;
flex-direction: column;
font-size: 1.5rem;
line-height: 1.3;
padding: 1rem 10px;
}

table th:nth-child(1) .svg-wrapper {
margin-top: 10px;
}

table th:nth-child(1) svg {
width: 22px;
height: 22px;
}

table th .heading {
padding: 1rem;
color: var(--white);
}

table th:nth-child(2) .heading {
background: var(--starter);
}

table th:nth-child(3) .heading {
background: var(--essential);
}

table th:nth-child(4) .heading {
background: var(--professional);
}

table th .info {
position: relative;
padding: 1.5rem 0;
border-left: 1px solid var(--lightgray);
}

table th .popular {
position: absolute;
top: 10px;
right: 0;
font-size: 11px;
background: var(--popular);
padding: 4px 8px;
border-radius: 2px;
}

table th .amount {
font-size: 2rem;
}

table th .amount span {
display: block;
transform: translateY(-8px);
}

table th:nth-child(2) .amount {
color: var(--starter);
}

table th:nth-child(3) .amount {
color: var(--essential);
}

table th:nth-child(4) .amount {
color: var(--professional);
}

table th .billing-msg,
table th .amount span {
font-weight: normal;
font-size: 0.8rem;
}

table th button {
border-radius: 20px;
padding: 8px 20px;
margin-top: 10px;
transition: all 0.2s;
}

table th:nth-child(2) button {
color: var(--starter);
border: 1px solid var(--starter);
}

table th:nth-child(2) button:hover {
background: var(--starter);
}

table th:nth-child(3) button {
color: var(--essential);
border: 1px solid var(--essential);
}

table th:nth-child(3) button:hover {
background: var(--essential);
}

table th:nth-child(4) button {
color: var(--professional);
border: 1px solid var(--professional);
}

table th:nth-child(4) button:hover {
background: var(--professional);
}

table th button:hover {
color: var(--white);
}

table td {
padding: 10px;
}

table td:not(:first-child) {
border-left: 1px solid var(--lightgray);
}

table td:first-child {
font-size: 1rem;
text-align: left;
}

table svg {
width: 18px;
height: 18px;
}

table svg.not-included {
fill: var(--gray);
}

table svg.starter {
fill: var(--starter);
}

table svg.essential {
fill: var(--essential);
}

table svg.professional {
fill: var(--professional);
}

table .hide {
display: none;
}

body {
  font-family: 'Arial', sans-serif;
}
.navbar {
  margin-bottom: 2rem;
}
.pricing-header {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e5e5e5;
}
.pricing-header h1 {
  font-size: 3rem;
  font-weight: bold;
}
.pricing-header h2 {
  font-size: 1.5rem;
}
.pricing-header p {
  font-size: 1.2rem;
}
.filter-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.filter-container .btn-group-toggle {
  margin-right: 10px;
}
.card {
  margin-bottom: 1.5rem;
  border: 1px solid #dee2e6;
  height: 100%;
}
.card-title {
  font-size: 1.5rem;
  font-weight: bold;
}
.card-title-2 {
  font-size: 3rem;
}
.card-subtitle {
  font-size: 1rem;
}
.card-text {
  font-size: 1rem;
  text-align: left;
}

.list-unstyled li {
  display: flex;
  align-items: center;
}
.list-unstyled li .fa-check {
  margin-right: 10px;
  color: green;
}

.popular-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2e4c75;
  color: white;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}


.pricing-btn {
  font-size: 1.2rem;                /* Text size */
  padding: 0.6rem 1rem;           /* Padding around the text */
  background-color: white;        /* Background is white */
  color: #2e4c75;                 /* Text color */
  border: 2px solid #2e4c75;      /* Border color matching the text */
  border-radius: 5px;             /* Border radius for rounded corners */
  transition: all 0.3s ease;      /* Smooth transition for hover effects */
  text-align: center;             /* Center the text */
  text-transform: capitalize;      /* Capitalize the text */
  letter-spacing: 0.1em;          /* Add spacing between letters */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);  /* Subtle shadow */
}

.pricing-btn:hover,
.pricing-btn:focus,
.pricing-btn.active {
  background-color: #2e4c75;
  color: white;
  border-color: #2e4c75;
}

.pricing-btn-group-toggle .pricing-btn {
  font-size: 1rem;
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
}

.pricing-btn-group-toggle .pricing-btn.active {
  background-color: #2e4c75;
  color: white;
}