/*
xbot home css
*/

header {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    padding: 15px 20px;
    z-index: 11;
    display: block;
    background: rgb(21 26 31);
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    box-shadow: 0px 0px 1px 0px #ffffff59;
    backdrop-filter: brightness(0.3) blur(5px);
}
body {
    padding-top: 68px !important;
    font-size: 16px;
    line-height: 1;
    background: #fefefe;
    color: #33333;
    position: relative;
} 
header nav ul { 
    display: flex;
    align-items: center;
    margin: 0;
    gap: 20px;
}
 
header nav ul li a {
    color: #ffffff;
}

main { 
    /* min-height: 100vh; */
    /* background: red; */
    display: flex;
    flex-direction: column; 
    position: relative;
    z-index: 1;
}

header nav ul li a {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
}

.header-inner {
    display: flex;
    align-items: center;
    width: 100%;
}

header nav {
    margin: auto;
}
span.branding {
    font-family: 'Lobster';
    font-weight: 100;
    /* color: #fff; */
}

span.branding span {
    /* color: #444444; */
}
canvas#canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


.hero {
    min-height: 600px;
    display: flex;
    align-items: center;
    /* box-shadow: inset 0px -70px 150px 0px rgb(243 243 243), inset 0px 60px 100px 0px rgb(243 243 243); */
    padding: 80px 0px;
    background: #e4e8e8;
    position: relative;
}

header nav ul li a i.fal {
    display: none;
}

.logo {
    font-weight: 300;
    font-size: 40px;
    font-family: Lobster;
    margin: -10px 0px;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    direction: ltr;
    /* background: linear-gradient(to right, #1b41a0 0%, #532885 100%); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    padding: 0px 3px;
    letter-spacing: 1px;
}
.fit-to {font-size: 13px;line-height: 1.33;margin: auto 0px;}
 

.fit-to > div:before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro';
    margin-inline-end: 7px;
    color: #1b41a0;
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-content small {
    letter-spacing: 0.3px;
    font-weight: 600;
    /* background: #c96f52; */
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 4px;
    display: table;
    color: #532885;
    /* padding: 9px 10px; */
    border-radius: 4px 4px 0px 0px;
    position: relative;
    margin: 0px 0px 9px;
    /* box-shadow: 0px 5px 6px -1px rgba(0,0,0,0.2); */
}
 
.logo span {
    color: #ffffff;
    transition: 0.6s all cubic-bezier(0.25, 0.1, 0, 2.07);
    display: table;
    text-transform: uppercase;
    font-size: 0.6em;
    margin-top: auto;
    line-height: 1.13;
}

.logo:hover span {
    transform: rotateY(360deg);
    /* display: table; */
    color: #ffffff;
}
 
.hero .hero-content h1 {
    margin: 0px 0px 20px;
    font-size: 40px;
    text-wrap: balance;
    color: #444444;
    letter-spacing: 1px;
    /* text-shadow: 2px 2px 0px black; */
    display: block;
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-buttons {
    margin-top: 30px;
    display: flex;
    gap: 25px;
}
.hero-buttons > .button.regular, .hero-buttons > .button.outline {
    margin: 0;
    line-height: 52px;
    height: 52px;
    padding: 0px 40px;
    font-size: 20px;
}
h1.a {
    color: #444444;
}

h1 span.b {
    color: #1b41a0;
}

/** HomeTabs **/


.hometab-section {
	padding: 70px 0 90px;
	/* background-color: #f3f3f3; */
}

h2 {
	margin: 0 auto 30px;
	font-size: 40px;
	letter-spacing: 0.3px;
	padding: 0;
	font-weight: 600;
	display: block;
	/* text-align: center; */
	color: #532885;
	text-align: center;
	display: table;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.32;
}
  





/** Benefits **/


.benefits-section {
    /* background-color: #e4e8e8; */
    padding: 80px 0 100px;
    /* box-shadow: inset 0px 120px 130px 20px rgb(243 243 243); */
.package-label {
    background: linear-gradient(to right, #4c9399 0%, #333333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    font-family: 'Lobster';
}

.package-name {
    display: flex;
    align-items: center;
    font-size: 14px;
    text-align: start;
    gap: 20px;
};
}

.benefits-title {
    /* text-align: center; */
    /* margin-bottom: 50px; */
    /* font-size: 46px; */
    /* font-weight: 400; */
    /* color: #000; */
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.highlight {
    color: #222d65;
    font-weight: 800;
    display:block;
}

.benefits-grid {
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    gap: 30px;
    margin: 0px auto 30px;
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 70px;
    align-items: start;
}

.benefit-card {
    /* background-color: #f3f3f3; */
    border-radius: 10px;
    padding: 4px 10px 20px;
    text-align: start;
    /* box-shadow: 16px 13px 55px -19px rgba(0,0,0,0.1); */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    gap: 0px 21px;
    flex-direction: column;
    flex: 0 0 calc(100% / 3 - 30px);
    margin: 0;
}

.benefit-card:hover {
    transform: none;
    /* box-shadow: 0 5px 50px -10px rgba(0,0,0,0.1); */
}

.benefit-icon {
    color: #1b41a0;
    /* margin-bottom: -46px; */
    /* min-width: 70px; */
    text-align: center;
    /* margin-inline-start: -9px; */
    margin-bottom: auto;
    /* margin-top: -20px; */
    font-size: 50px;
    /* filter: drop-shadow(0px 0px 15px #44444485) drop-shadow(0px 0px 15px #44444485); */
    /* flex: 0 0 70px; */
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.benefit-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #532885;
    margin: 0px 0px 10px;
    line-height: 1;
    flex: 1;
    text-align: start;
    /* text-align: center; */
    letter-spacing: 0px;
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.benefit-card .benefit-content {
    /* color: #666; */
    /* font-size: 16px; */
    margin: 0 0 auto;
    text-align: start;
    /* flex: 0 0 100%; */
    /* padding-inline-start: 72px; */
    /* text-align: center; */
    position: relative;
    margin-top: 30px;
    background: #e4e8e870;
    padding: 29px;
    border-radius: 10px 0px 10px 0px;
}
.benefit-content:before {
    margin: auto;
    content: '';
    position: absolute;
    left: 0;
    display: table;
    top: -30px;
    border: 10px solid transparent;
    border-bottom: 20px solid #f2f4f4;
    right: 0;
}

.benefit-content p {
    margin: 0;
}
.benefits-cta {
    text-align: center;
    max-width: 550px;
    margin: auto;
    text-wrap: pretty;
    width: 100%;
}

.fomo-text {
    color: #465865;
    text-wrap: balance;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #444444c9;
    text-wrap: balance;
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
 
@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

.subtitle {
    line-height: 1.6;
    max-width: 459px;
    /* color: #D9DADB; */
}

p, li {
    line-height: 1.5;
    font-weight: 400;
    font-size: 16px;
}
 



/** integrtions **/
        .integrations-section {
            padding: 80px 0;
            /* color: white; */
            background: #e4e8e8;
        }
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 15px;
        }
        .integrations-title {
            text-align: center;
            text-wrap: balance;
            margin: 0 auto 14px;
            font-size: 2.5em;
            background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .integrations-subtitle {
            text-align: center;
            margin-bottom: 10px;
            /* font-size: 1.2em; */
            /* color: #242424; */
        }
        #carousel-container {
            width: 800px;
            height: 500px;
            position: relative;
            margin: 0 auto 50px;
            perspective: 1000px;
            perspective-origin: top;
        }
        .carousel-item {
            position: absolute;
            width: 250px;
            height: 300px;
            top: 100%;
            left: calc(100% / 3);
            margin-top: -50%;
            transform-origin: center !important;
            transition: all 1.4s cubic-bezier(0.18, 0.9, 1, 1);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* background: linear-gradient(135deg, #0f1215, #1a1d2d); */
            border-radius: 15px;
            cursor: pointer;
            /* box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); */
            overflow: hidden;
        }
        .carousel-item::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            /* background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); */
            transform: rotate(30deg);
        }
        .carousel-item::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 4px;
            /* background: #b79343; */
        }
        .carousel-item img {
            max-width: 70%;
            max-height: 70%;
            object-fit: contain;
            transition: 0.3s all ease;
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));
            image-rendering: -webkit-optimize-contrast;
        }
        .carousel-item .integration-name {
            font-size: 14px;
            color: #1b41a0;
            margin-top: 20px;
            opacity: 0;
            transition: opacity 0.3s ease;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition-delay: 1s;
            width: 100%;
            font-weight: 300;
            text-align: center;
        }
        .carousel-item.active {
            z-index: 10;
            display: flex;
        }
        .carousel-item.active .integration-name {
            opacity: 1;
        }
        .integrations-cta {
            text-align: center;
        }

/* v2 */
.integ-col {
    display: flex;
    flex-direction: column;
}

.integ-row {
    display: flex;
    gap: 30px 0px;
    flex-wrap: wrap;
    justify-content: center;
}

.integ-col {
    flex: 0 0 300px;
    margin: 0px 0  0px;
    text-align: center;
    margin-top: 30px;
}
.integ-col span {
    font-size: 12px;
}
.integ-col img {
    padding: 20px;
    max-width: 210px;
    display: table;
    margin: auto;
    height: 80px;
    object-fit: contain;
    object-position: center;
    /* filter: drop-shadow(0px 0px 21px rgba(0,0,0,0.3)) drop-shadow(0px 0px 21px rgba(0,0,0,0)); */
    image-rendering: optimizequality;
}




.header-buttons > .button.outline {
    margin: auto;
    color: white;
    border: 1px solid white;
}

.header-buttons {
    display: flex;
    gap: 15px;
} 
.separator.separator-1 svg {
    fill: #e4e8e8;
    stroke: #1b41a0;
    top: 3px;
    position: relative;
    transform: rotate(180deg);
    /* filter: drop-shadow(0px 7px 0px #e4e8e8); */
    padding-bottom: 10px;
}

.separator.separator-2 svg {
    fill: #e4e8e8;
    stroke: #1b41a0;
    /* transform: rotate(180deg); */
    overflow: hidden;
    top: -3px;
    position: relative;
    /* filter: drop-shadow(0px 6px 0px #e4e8e8); */
    padding-bottom: 41px;
}

.separator {
    width: 100%;
    overflow: hidden;
}

footer {
    padding: 60px 30px 30px;
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    color: white;
}

.footer-container {
    max-width: 1020px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.footer-row {
    display: flex;
    gap: 90px;
}

.footer-col {
    flex: 1;
}

.footer-bottom {
    text-align: center;
    width: 100%;
    flex: 0 0 100%;
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #ffffff38;
}

.footer-title {
    color: #fefefe;
    font-weight: 500;
    letter-spacing: 0.2px;
    font-size: 20px;
}

.footer-col ul li a {
    display: block;
    color: #FFF;
    line-height: 1.3;
    /* margin-top: 20px; */
}

.footer-col ul {
    list-style: circle;
    color: white;
    margin: 0px 20px;
}

.footer-col ul li {
    margin-top: 10px;
}

.footer-title .branding {
    font-size: 60px;
    display: block;
    margin-bottom: 10px;
}

.footer-bottom ul {
    display: flex;
    gap: 20px;
}

.footer-bottom ul a {
    color: #ffffff;
    font-size: 12px;
}

.footer-col p {
    font-size: 14px;
}

.social-links a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    background: white;
    color: #532885;
    border-radius: 30px;
    margin-top: 20px;
}

.social-links {
    display: flex;
    gap: 20px;
    text-align: center;
}


/*** accordion *****/


.flex-part.flex-part--accordion {
    /* background: #F0EDF0; */
    overflow: hidden;
}

.accordion-default-wrapper {
    /* background: #F0EDF0; */
    position: relative;
    padding: 120px 0px;
}

.accordion-main-label {
    color: #918c80;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    /* text-transform: uppercase; */
}
a.accordion-main-label.bold-color i {
    margin-inline-start: 10px;
    transition: 0.14s all ease;
}

a.accordion-main-label.bold-color:hover i {
    transform: translateX(5px);
}
.accordion-main-title {
    color: #532885;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.32;
    margin: 10px 0px 20px;
    text-wrap: balance;
    letter-spacing: 0.6px;
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: table;
    width: fit-content;
    max-width: 300px;
    margin-inline-end: auto;
}
.accordion-row {
    display: flex;
    margin: auto;
    width: 100%;
    max-width: 1020px;
    gap: 60px;
    align-items: start;
    justify-content: center;
}

.accordjion-menu {
    flex: 0 0 420px;
}

.accordion-gallery {
    flex: 1;
    position: sticky;
    top: 130px;
    height: 700px;
}
.accordion-item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #444444;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
    cursor: pointer;
    transition: 0.2s all ease;
}

.accordion-item {border-bottom: 1px solid #00000021;padding: 10px 0px 9px;transition: 0.14s all ease;border-top: 1px solid #525b6440;}
.accordion-item-title .toggler {
    transition: 0.4s all ease;
}

.accordion-item.active .accordion-item-title .toggler {
    transform: rotateX(180deg);
}
.accordion-item-content {display: none;/* color: #212529; */font-size: 18px;font-weight: 400;line-height: 28px;padding: 10px 0px;}

.accordion-images {
    /* min-height: 500px; */
    position: relative;
    /* width: calc(100% - 20px); */
    /* margin-inline-start: auto; */
    /* margin-top: 120px; */
    /* position: sticky; */
    /* top: 130px; */
    width: 100%;
    /* height: -webkit-fill-available; */
    height: 100%;
}
.pricing-sticky-header.sticky .package-top {
    padding: 0px 0px 30px;
} 
.accordion-item + .accordion-item {
    border-top: 1px solid #00000005;
}

.accordion-items {
    /* border-bottom: 1px solid #00000059; */
    /* border-top: 1px solid #525b6440; */
}
.accordion-image {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: table;
    text-align: center;
    transition: 0.3s all ease;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition-delay: 0s;
    width: 500px;
    height: 700px;
    border: 1px solid #ddd;
} 
.accordion-image:nth-child(even) {
    /* transform: translateX(35px) scale(0.9); */
}
.accordion-image.active {
    transform: none;
    opacity: 1;
    visibility: visible;
}
a.bold-color i {
    transition: 0.2s all ease;
    margin-inline-start: 4px;
}

a.bold-color:hover i {
    margin-inline-start: 10px;
}

.accordion-item-content a {
    display: table;
    color: #532885;
    text-align: center;
    /* font-size: 16px; */
    font-weight: 600;
    line-height: normal;
    margin: 10px 0px 0px;
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.accordion-decoration {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
}
.accordion-decoration img {
    height: 100%;
    object-fit: cover;
    display: table;
    object-position: top left;
}
.accordion-item.active .accordion-item-title {
    color: #1b41a0;
}

.accordion-item.active .accordion-item-title .the-title {
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.accordion-item ul li:before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 600;
    margin-inline-end: 10px;
    color: #3b5c8b;
}

/** fqs ***/        
.faq-container {
	display: flex;
	align-items: start;
	gap: 40px;
	margin: auto;
	max-width: 1020px;
	width: 100%;
	text-align: start;
}

.faq-title {
	text-align: start;
	flex: 0 0 390px;
	position: sticky;
	top: 100px;
}
section#faqs {
	background: #fefefe;
	position: relative;
	padding: 80px 0px 100px;
}

.faq-heading {
	color: #444444;
	font-weight: 600;
	font-size: 40px;
	margin-bottom: 30px;
	background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: table;
}

.faq-item:not(.hidden) {
	border-bottom: 1px solid #7ec3bd57;
	padding-bottom: 20px;
}

.faq-question:after {
	content: '\f107';
	font-family: 'Font Awesome 6 Pro';
	font-weight: 100;
	margin-inline-start: auto;
	transition: 0.2s all ease;
}

.faq-question.active {
	color: #1b41a0;
	background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.faq-content {
	flex: auto;
}

/* New styles for search and categories */
.faq-search {
	margin-bottom: 20px;
	/* padding: 10px; */
	font-size: 16px;
	border: 1px solid #e4e8e8;
	background: #e4e8e8;
	color: #444;
	position: relative;
	/* box-shadow: inset 1px 1px 0px 0px rgb(255 255 255 / 8%), inset -1px -1px 0px 0px rgb(0 0 0/ 43%); */
	border-radius: 3px;
}

.faq-search input {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	border: 0;
	background: transparent;
	color: #fff;
	outline: none;
	padding-inline-start: 40px;
}

.faq-question.active:after {
    color: #444444;
    transform: rotateX(180deg);
}
.faq-categories {
	margin-bottom: 20px;
	display: flex;
	gap: 11px;
	column-fill: balance;
	flex-wrap: wrap;
}
.faq-search:before {
    content: '\f002';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 100;
    position: absolute;
    top: 0;
    bottom: 0;
    display: table;
    margin: auto;
    inset-inline-start: 10px;
}
.faq-category {
	border-radius: 3px;
	display: inline-block;
	/* margin-right: 10px; */
	/* margin-bottom: 10px; */
	padding: 9px 16px;
	background: transparent;
	color: #666666;
	cursor: pointer;
	border: 1px solid #e4e8e8;
	transition: 0.2s all ease;
	/* box-shadow: inset -1px -1px 0px 0px rgb(255 255 255 / 8%), inset 1px 1px 0px 0px rgb(0 0 0/ 43%); */
}

.faq-category.active {
	color: #444444;
	/* color: #33333; */
	/* box-shadow: inset 1px 1px 0px 0px rgb(255 255 255 / 8%), inset -1px -1px 0px 0px rgb(0 0 0/ 43%); */
	background: #e4e8e8;
}

.faq-item {
	transition: opacity 0.3s ease;
}

.faq-item.hidden {
	display: none;
}



/* pricing */ 
  
 

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Pricing Section */
.pricing-section {
    padding: 80px 0 110px;
    background: #e4e8e8;
}

.section-title {
    /* text-align: center; */
    /* color: var(--color-text-light); */
    /* font-size: 2.5rem; */
    /* margin-bottom: 40px; */
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Pricing Table */
.pricing-table {
    /* background: var(--color-package-bg); */
    border-radius: 10px;
    /* overflow: hidden; */
    /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); */
    /* box-shadow: -71px -6px 140px -40px rgb(201 161 73), 71px 5px 140px -40px rgb(71 136 142); */
}

.pricing-header {
    display: flex;
    /* top: 0; */
    z-index: 10;
    /* background: var(--color-background); */
    gap: 20px;
    position: sticky;
    top: 70px;
}

.pricing-feature-column,
.pricing-package-column {
    flex: 1;
    padding: 20px;
    text-align: center;
}

.pricing-feature-column {
    /* background: var(--color-primary); */
    color: var(--color-text-light);
    border-top: 1px solid #42464900;
    color: #532885;
    font-weight: 500;
}

.pricing-package-column:not(.k-empty) {
    /* border: 1px solid var(--color-border); */
    background: #fefefe;
    /* border-radius: 10px 10px 0px 0px; */
    border-top: 1px solid #3c474d40;
    justify-content: center !important;!i;!;
}

.pricing-package-column h3 {
    color: var(--color-secondary);
    font-size: 2rem;
    margin-bottom: 10px;
    /* position: sticky; */
    text-align: center;
    justify-content: center;
    font-family: 'Lobster';
    font-weight: 300;
    position: sticky;
    top: 68px;
    z-index: 2;
    background: #fefefe;
    margin: 0 -20px;
    padding: 10px 0px 10px;
}

.package-description {
    min-height: 60px;
    text-wrap: balance;
    display: flex;
    align-items: start;
    line-height: 1.4;
}
.package-label {
    /* background: linear-gradient(to right, #4c9399 0%, #333333 100%); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    font-size: 50px;
    font-family: 'Lobster';
    color: #532885;
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.package-name {
    display: flex;
    align-items: center;
    font-size: 14px;
    text-align: center;
    gap: 20px;
}
.package-price {
    margin: 20px 0 0;
}

.package-price .price {
    font-size: 1.2rem;
    color: #1b41a0;
    font-weight: 400;
}

.package-price .period {
    font-size: 1rem;
}

.package-setup-fee,
.package-messages,
.package-message-fee {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.cta-button {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text-light);
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

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

/* Pricing Body */
.pricing-body {
    /* background: var(--color-package-bg); */
    font-size: 15px;
}

.pricing-row {
    display: flex;
    gap: 20px;
    /* border-top: 1px solid #3c474d40; */
}

.pricing-row:nth-child(even) {
    /* background: rgba(255, 255, 255, 0.03); */
}

.pricing-row .pricing-feature-column,
.pricing-row .pricing-package-column {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: start;
}

.feature-name {
    display: flex;
    align-items: center;
    width: 100%;
}
 

/* Feature Value Styles */
.feature-value {
    /* font-size: 1.2rem; */
    margin: -10px auto;
}

.feature-value .fa-check {/* background: linear-gradient(to right, #4c9399 0%, #333333 100%); *//* background: linear-gradient(to right, #4c9399 0%, #333333 100%); *//* -webkit-background-clip: text; *//* -webkit-text-fill-color: transparent; */color:white;border-radius:20px;width: 30px;color: #1b41a0;height: 30px;line-height: 30px;font-size: 26px;}
.feature-value .fa-times {
    color: #4f4f4f;
}


/* Custom Package Section */
.custom-package-section {
    /* background: var(--color-package-bg); */
    padding: 60px 0;
    margin-top: 60px;
}

.custom-package-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background: #ffffffd4;
    border-radius: 20px;
    max-width: 870px;
    width: 100%;
    margin: 0px auto;
    padding: 50px 0px;
    box-shadow: 3px -3px 30px -3px rgb(0 150 136), -3px 3px 30px -3px rgb(134 64 213);
    /* margin-inline-start: 20px; */
}

.custom-package-icon {
    font-size: 14rem;
    color: var(--color-primary);
    opacity: 1;
    margin: -8rem -8rem -8rem -1rem;
    order: 2;
    color: #1b41a0;
    background: linear-gradient(to right top, #1b41a026 0%, #53288512 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.custom-package-text h3 {
    color: #532885;
    font-size: 1.5rem;
    margin: 0 0 19px;
    background: linear-gradient(to right, #1b41a0 0%, #532885 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: table;
}

.custom-package-text p {
    max-width: 550px;
}

.custom-chat-link {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

.custom-chat-link:hover {
    color: var(--color-secondary);
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .pricing-header {
        flex-direction: column;
    }

    .pricing-feature-column {
        display: none;
    }

    .pricing-package-column {
        border-left: none;
        border-bottom: 1px solid var(--color-border);
    }

    .pricing-row {
        flex-direction: column;
    }

    .pricing-row .pricing-feature-column {
        display: flex;
        background: var(--color-primary);
        color: var(--color-text-light);
    }

    .custom-package-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }

    .pricing-package-column h3 {
        font-size: 1.5rem;
    }

    .package-price .price {
        font-size: 2rem;
    }
}

.tooltip-content p {
    margin: 10px 0px 10px;
    text-align: start;
}
 
.pricing-header > .pricing-package-column {
    border-radius: 10px 10px 0px 0px;
    position: sticky;
    top: 0;
}

a.button.regular:hover {
    box-shadow: 3px -3px 20px -10px rgb(0 150 136 / 47%), -3px 3px 19px -10px rgb(134 64 213);
}
.header-buttons a.button {
    margin: auto;
}