1  @import "tailwindcss";
  2  @plugin "daisyui";
  3  @source inline("grid");
  4  @source inline("grid-cols-3");
  5  
  6  @layer base {
  7      h1 {
  8          font-size: var(--text-3xl);
  9      }
 10      h2 {
 11          font-size: var(--text-2xl);
 12      }
 13      h3 {
 14          font-size: var(--text-lg);
 15      }
 16      h1, h2, h3 {
 17          font-weight: bold;
 18      }
 19  }
 20  
 21  .btn {
 22      border-radius: 75px;
 23  }
 24  
 25  #rmv-btn:hover {
 26      color: white;
 27      border-radius: 5px;
 28  }
 29  
 30  .brand-color, input[name="product-tabs"]:checked, .step {
 31      background: linear-gradient(to bottom, rgba(79, 57, 246, 1) 0%,rgba(149, 20, 250, 1) 100%);
 32      color: white;
 33  }
 34  
 35  .stat-item + .stat-item {
 36      border-left: 1px solid gray;
 37  }
 38  
 39  #step-cards .step-card {
 40      padding: 24px 24px 50px 24px;
 41      background: #ffffffFF;;
 42      border-radius: 10px;
 43      border: 2px solid #f1f1f1FF;;
 44      text-align: center;
 45  
 46      display: flex;
 47      flex-direction: column;
 48      gap: 10px;
 49      align-items: center;
 50  }
 51  
 52  .step-card p {
 53      font-weight: 400;
 54      color: #627382FF;;
 55  }
 56  
 57  .step {
 58      padding: 8px 12px;
 59      border-radius: calc(infinity * 1px);
 60      align-self: end;
 61  }
 62  
 63  .step-title {
 64      display: flex;
 65      flex-direction: column;
 66      gap: 5px;
 67      align-items: center;
 68  }
 69  
 70  .step-icon {
 71      padding: 15px;
 72      background-color: var(--color-slate-200);
 73      border-radius: calc(infinity * 1px);
 74      width: fit-content;
 75  }
 76  
 77  .price-card {
 78      padding: 25px;
 79      border-radius: 10px;
 80      display: flex;
 81      flex-direction: column;
 82      flex-grow: 2;
 83      gap: 20px;
 84      border: 2px solid #f2f2f2FF;
 85      background-color: #F9FAFCFF;
 86      height: 400px;
 87  }
 88  
 89  #pro-card {
 90      padding: 25px 25px 22px;
 91      border-radius: 10px;
 92      display: block;
 93      flex-grow: 2;
 94      align-self: start;
 95  }
 96  
 97  @media (max-width: 950px) {
 98      #price-cards {
 99          flex-direction: column;
100          text-align: center;
101          gap: 45px;
102      }
103  
104      .price-card, #pro-card {
105          height: fit-content;
106          width: 100%;
107      }
108  
109      #pro-card {
110          width: 100%;
111      }
112  }
113  
114  .price {
115      font-size: 1.7rem;
116      font-weight: bold;
117  }
118  
119  .price-card button {
120      margin-top: auto;
121  }
122  
123  .social {
124      border-radius: 25px;
125      background-color: white;
126      padding: 4px;
127      width: 26px;
128      height: 26px;
129  }
130  
131  #footer-content :is(h2, h3) {
132      margin-bottom: 10px;
133  }
134  
135  #footer-content ul {
136      display: flex;
137      flex-direction: column;
138      gap: 7px;
139  }