/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
.custom-gradient-button .elementor-button {
  /* Base background + 3 layers */
  background:
    linear-gradient(226.51deg, #073137 -10.36%, #008037 55.98%, #008037 82.6%),
    linear-gradient(180deg, #66666633 0%, #66666600 32.69%),
    linear-gradient(180deg, #FFFFFF40 0%, #FFFFFF00 100%),
    #008037DE !important;

  background-blend-mode: normal !important;

  color: white !important;
  border: 1px solid transparent !important;
  border-image-source: linear-gradient(124.27deg, #FFFFFFE6 3.26%, #FFFFFF40 95.19%);
  border-image-slice: 1;
  border-radius: 8px;
  padding: 1rem 2rem;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  transition: all 0.3s ease;
}

.accent {
    background-image: linear-gradient(to right, #305F42, #64C589);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;}

    
.accent-up {
    background-image: linear-gradient(#305F42 50%, #64C589 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  line-height: 1.2;
  padding-top: 2px;
  overflow: visible; /* ensure the full text renders */;}  

 .diagonal-accent{
      background: linear-gradient(155deg, #305F42 50%, #64C589 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }

.gradient-text {
  font-size: 2.5rem;
  font-weight: bold;
  background: radial-gradient(circle at center, #84C29F, #84C29F, #305F42);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-align: center;
}

.white-text {
    background-image: linear-gradient(to right,#FFFFFF, #64C589);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;}  

button#e-n-tab-title-2063875581.e-n-tab-title{
  border-radius: 16px 0px 0px 16px;
  border-width: 1px 0px 1px 1px;
}

button#e-n-tab-title-2063875585.e-n-tab-title{
  border-radius: 0px 16px 16px 0px;
  border-width: 1px 1px 1px 0px;
}

.custom-card {
  display: flex;
  align-items: center;
  padding: 12px 12px;
  border-radius: 32px;
  background: 
    linear-gradient(0deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
    linear-gradient(0deg, #0C3A30, #0C3A30),
    radial-gradient(76.43% 160.13% at 51.82% 46.8%, rgba(5, 255, 167, 0.261) 0%, rgba(181, 231, 252, 0) 74.88%);

  box-shadow:
    2px 2px 1px -2px #B3B3B3 inset,
    -12px -12px 6px -14px #B3B3B3 inset,
    16px 16px 9px -18px rgba(255, 255, 255, 0.5) inset;

}
/* Style for pagination container */
.custom-slider-pagination .elementor-swiper-button {
  display: none; /* Hide arrows if you want only dots */
}

/* Pagination bullets base style */
.custom-slider-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #d8d8d8;
  opacity: 1;
  border-radius: 50%;
  margin: 0 4px;
  transition: all 0.3s ease;
}

/* Active bullet styled like in the image */
.custom-slider-pagination .swiper-pagination-bullet-active {
  width: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #305F42, #64C589);
}
/*Our Plans - Tables*/
:root {
--bg-light: #f8f7f4;
--bg-should: #64c589;
--bg-ideal: #305f42;
--header-should: #64C589;
--border: #cfd6f0;
--check: #305f42;
--cross: #d9534f;
}

.comparison {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}

.comparison th,
.comparison td {
font-family: "Inter .woff";
padding: 14px 16px;
border-bottom: 1px solid var(--border);
text-align: center;
font-size: 15px;
}

.comparison th:first-child,
.comparison td:first-child {
text-align: left;
min-width: 260px;
}

.comparison thead th {
font-size: 18px;
font-weight: 600;
}

.col-features {
background: var(--bg-light);
color:#305f42;
font-weight: 600;
font-size: 16px;
text-transform: capitalize;
width: 400px;
}

.col-must {
background: #305f42;
border-radius: 24px 24px 0 0;
}

.col-should {
background: var(--bg-should);
}

.col-ideal {
background: var(--bg-ideal);
border-radius: 24px 24px 0 0;
}

.header-should {
background: var(--header-should);
color: #1c3b1c;
border-radius: 24px 24px 0 0;
}
.header-should span{
font-size: 14px;
}

.badge {
font-size: 13px;
opacity: 0.9;
}

.check {
color: var(--check);
font-weight: bold;
font-size: 18px!important;
}

.cross {
color: var(--cross);
font-weight: bold;
font-size: 18px!important;
}

.col-title-features, 
.col-must,
.col-should,
.col-ideal{
color:#FFFFFF;
border: 0 !important;
font-size: 20px!important;
letter-spacing: 1px;
align-content: end;
}

.bradius-top-left{
border-radius: 20px 0 0 0;
}
.bradius-bottom-left{
border-radius: 0 0 0 20px;
}
.bradius-bottom-right{
border-radius: 0 0 20px 0;
}

@media (max-width: 768px) {
.comparison th,
.comparison td {
padding: 12px;
font-size: 14px;
}
}

@media (max-width: 560px) {
.comparison {
font-size: 13px;
}
}

/* Mobile cards */
@media (max-width: 1023px) {
.comparison { display: none; }
.mobile-cards { display: grid; gap: 20px; }
.card {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border);
background: #fff;
}
.card.must { background: var(--bg-light); }
.card.should { background: var(--bg-light); }
.card.ideal { background: var(--bg-light); }
.card-header {
padding: 16px;
font-size: 20px;
font-weight: 600;
text-align: center;
}
.card.should .card-header {
background: var(--header-should);
}
.card-body {
padding: 12px 16px;
display: grid;
gap: 10px;
font-size: 14px;
}
.card-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--border);
padding-bottom: 6px;
}
.card-row:last-child { border-bottom: none; }
.card-footer {
padding: 16px;
text-align: center;
}
}