/*
Theme Name: chat1x Theme
Theme URI: https://chat1x.com
Author: Chat1x
Author URI: https://chat1x.com
Description: A custom WordPress theme for Chat1x
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tg-anychat-theme
*/

body {
	font-family: 'Arial', sans-serif;
	color: #343a40; /* Darker default text */
	background-color: #FFFFFF;
}

.main-content{
	min-height: calc(100vh - 300px); /* Adjusted for fixed navbar height */
}

/* SVG for Hero Curve */
svg.hero-clip-path-svg {
	width: 0;
	height: 0;
	position: absolute;
}

.hero-section {
	background: linear-gradient(135deg, #1e5799 0%, #2989d8 50%, #207cca 100%); /* Refined Blue Gradient */
	color: white;
	padding-top: 30px; /* Adjusted padding */
	padding-bottom: 100px; /* Increased padding for curve visibility */
	text-align: center;
	position: relative;
	clip-path: url(#heroCurveClip);
	-webkit-clip-path: url(#heroCurveClip);
}

.hero-section .navbar-brand img.logo {
	max-width: 140px; /* Slightly adjusted */
	margin-right: 15px;
}
.hero-section .navbar-nav .nav-link {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	padding-left: 1rem;
	padding-right: 1rem;
}
.hero-section .navbar-nav .nav-link:hover,
.hero-section .navbar-nav .nav-link.active {
	color: white;
}

.hero-section h1 {
	font-size: 2.7rem; /* Slightly adjusted */
	font-weight: 700; /* Bolder */
	margin-bottom: 20px;
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.3;
}

.hero-section .subheading {
	font-size: 1.15rem; /* Slightly larger */
	margin-bottom: 35px;
	max-width: 580px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.hero-section .btn-get-started {
	background-color: white;
	color: #0d6efd; /* Bootstrap primary blue */
	font-weight: bold;
	padding: 14px 35px; /* Increased padding */
	border-radius: 50px; /* Pill shape */
	border: none;
	transition: all 0.3s ease;
	font-size: 1.1rem;
}
.hero-section .btn-get-started:hover {
	background-color: #f0f8ff; /* Lighter blue on hover */
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.app-store-badges img {
	height: 48px; /* Adjusted height */
	margin: 5px 8px;
	border-radius: 6px; /* Slight rounding if they are placeholders */
}

.section-padding {
	padding: 70px 0; /* Increased padding */
}
.section-padding.first-section-after-hero {
	padding-top: 100px; /* Extra padding for section after curved hero */
}

.section-heading {
	text-align: center;
	margin-bottom: 50px; /* Increased margin */
	font-size: 2.3rem; /* Adjusted size */
	font-weight: 700;
	color: #212529; /* Darker heading */
}

.light-bg {
	background-color: #f8f9fa; /* Standard light grey */
}

.feature-card {
	background-color: white;
	border: 1px solid #dee2e6; /* Standard border */
	border-radius: 12px; /* More pronounced rounding */
	padding: 30px 25px; /* Adjusted padding */
	text-align: center;
	box-shadow: 0 6px 18px rgba(0,0,0,0.07); /* Refined shadow */
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.feature-card .icon-feature {
	font-size: 2.8rem; /* Larger icons */
	margin-bottom: 20px;
	color: #0d6efd; /* Bootstrap primary blue for icons */
}
.feature-card h5 {
	font-size: 1.25rem; /* Slightly larger heading */
	font-weight: 600;
	margin-bottom: 12px;
	color: #343a40;
}
.feature-card p {
	font-size: 0.95rem;
	color: #495057; /* Softer text color */
	line-height: 1.6;
}

.icon-grid .icon-wrapper {
	display: inline-block;
	text-align: center;
	margin: 10px 12px;
}
.icon-grid .bi {
	font-size: 2.5rem; /* Size for messenger/social icons */
	padding: 12px;
	border-radius: 10px;
	transition: all 0.2s ease-in-out;
}
.icon-grid .bi:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Specific Icon Colors (Examples, add more as needed from screenshot) */
.bi-messenger { color: #0084FF; }
.bi-whatsapp { color: #25D366; }
.bi-discord { color: #5865F2; }
.bi-telegram { color: #0088CC; }
/* Add other specific social/messenger icon colors if needed or use a generic one */
.icon-grid .bi-default-color { color: #495057; }


.mockup-image {
	width: 100%;
	max-width: 320px; /* Adjusted */
	height: auto;
	border: 1px solid #e0e0e0;
	border-radius: 10px; /* More rounding */
	margin-bottom: 20px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.large-mockup-image {
	width: 100%;
	max-width: 100%; /* Adjusted */
	height: auto;
	/* border: 1px solid #e0e0e0; */
	border-radius: 12px;
	margin: 0 auto 25px auto;
	display: block;
	/* box-shadow: 0 8px 20px rgba(0,0,0,0.1); */
}

.form-mockup {
	width: 100%;
	max-width: 270px; /* Adjusted */
	border: 1px solid #ced4da;
	border-radius: 10px;
	margin-bottom: 25px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.07);
}
.form-mockup-header { /* For the pink bar in screenshot */
	background-color: #E91E63; /* Pink color from screenshot */
	color: white;
	padding: 10px 15px;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
	font-weight: bold;
	font-size: 0.9rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.form-mockup-header .bi-x-lg { font-size: 0.8rem; }
.form-mockup img.placeholder-content { /* If the form content is an image */
		border-bottom-left-radius: 9px;
		border-bottom-right-radius: 9px;
}


.integration-logo {
	height: 100px; /* Adjusted height */
	object-fit: contain;
	filter: grayscale(30%);
	opacity: 0.85;
	transition: all 0.2s ease;
}
.integration-logo:hover {
	filter: grayscale(0%);
	opacity: 1;
}
.integration-logo-cms {
	height: 100px; /* Adjusted */
	object-fit: contain;
}

.footer {
	background-color: #212529; /* Darker footer */
	color: #adb5bd; /* Softer text */
	padding: 40px 0 20px 0; /* Adjusted padding */
	font-size: 0.9rem;
}
.footer a {
	color: #ced4da; /* Lighter links */
	text-decoration: none;
}
.footer a:hover {
	color: white;
	text-decoration: underline;
}
.footer .copyright {
	color: #6c757d; /* Dimmer copyright */
	font-size: 0.85rem;
}
.footer-chat-icon {
	position: fixed;
	bottom: 25px;
	right: 25px;
	background-color: #D81B60; /* Refined Pink from screenshot chat bubble*/
	color: white;
	width: 55px;  /* Slightly larger */
	height: 55px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem; /* Larger icon */
	box-shadow: 0 5px 15px rgba(0,0,0,0.25);
	z-index: 1030; /* Ensure it's above other content */
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.footer-chat-icon:hover {
	background-color: #c2185b; /* Darker pink on hover */
}
.text-lead-custom {
	font-size: 1.1rem;
	font-weight: 300;
	color: #495057;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}
.builtin-forms-section img{
	background-color: #f2f2f2;
	padding: 40px;
	border-radius: 15px;
}
.builtin-forms-section p{
	margin-top: 15px;
	padding: 15px;
	text-align: left;;
}

.btn-get-started:hover {
	color: black !important; /* Ensure hover color is black */
}
.navbar-dark{
	background: linear-gradient(135deg, #1e5799 0%, #2989d8 50%, #207cca 100%)
}

@media (max-width: 768px) {
	img{
		max-width: 100% !important;
	}
}

/* Pricing */
.tabs {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.tab {
	padding: 8px 20px;
	margin: 0 5px;
	border-radius: 6px;
	cursor: pointer;
	background-color: #fff;
	border: 1px solid #ccc;
}

.tab.active {
	background-color: #1e4fd1;
	color: #fff;
}

.pricing-table {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.plan {
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	padding: 20px;
	text-align: center;
	border: 2px solid transparent;
}

.plan.highlight {
	border-color: #1e4fd1;
}

.plan h3 {
	font-size: 20px;
	color: #1e4fd1;
	margin-bottom: 5px;
}

.plan p {
	font-size: 14px;
	color: #777;
	margin-bottom: 15px;
}

.price {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}

.plan .btn {
	display: inline-block;
	padding: 8px 18px;
	color: #1e4fd1;
	border: 2px solid #1e4fd1;
	border-radius: 6px;
	text-decoration: none;
	margin-bottom: 15px;
	font-weight: bold;
}

.plan .btn.primary {
	background-color: #1e4fd1;
	color: white;
}

.features {
	text-align: left;
	margin-top: 10px;
}

.features li {
	list-style: none;
	margin: 8px 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.features li::before {
	content: "✓";
	color: #1e4fd1;
	font-weight: bold;
}

.features li.unavailable::before {
	content: "✗";
	color: #ccc;
}

.features li.unavailable {
	color: #999;
}

@media (max-width: 768px) {
	.pricing-table {
	grid-template-columns: 1fr;
	}
}