/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: "PT Sans", sans-serif;
color: #fff;
background: #000;
}
.Access-Guide p.card_text {
min-height: 136px;
}
.Access-Guide-sec .card_title {
min-height: 96px;
}
section.Access-Guide-sec img {
width: 100%;
height: 372px !important;
}
a {
color: #fff;
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "PT Sans", sans-serif;
}
ul li {
list-style: none;
}
ul {
padding: 0;
}
.footer-contact p.fst-italic {
margin-top: 27px;
margin-left: 46px;
}
.footer-contact p.fst-italic i {
font-size: 30px;
}
.home .about img{
width:100%;
}
@media (max-width: 575px) {
.home .about img {
border-radius: 50%;
box-shadow: 0px 0px 28px 2px #37d10538;
margin-bottom: 40px;
}
}
.home_blg_read {
text-align: center;
margin-top: 30px;
}
.contact_left {
margin: 0;
padding: 0;
}
.contact_left ul {
list-style-type: none;
padding: 0;
}
section.cpt_sec {
padding-top: 185px;
}
.cpt_sec .card{
text-align:center;
}
.cpt_sec .card_image img{
height: 170px;
}
.contact_left ul > li {
padding: 0 0 0 40px;
position: relative;
margin-bottom: 20px;
}
.contact_left ul > li > i {
padding: 7px;
color: #fff;
position: absolute;
z-index: 1;
left: 0;
top: 0;
font-size: 16px;
text-align: center;
background: #000000;
height: 30px;
width: 30px;
}
.contact_left ul > li h3 {
margin: 0 0 5px 0;
font-size: 14px;
color: #222;
text-transform: uppercase;
font-weight: 700;
font-family: 'Arial';
}
.contact_left ul > li p {
margin: 0;
padding: 0;
font-size: 16px;
color: #000;
}
.contact_left ul > li p a {
color: #000;
text-decoration: none;
}
.contact_right {
margin: 0;
padding: 0;
}
.contact_right .form-group input {
margin: 0;
padding: 10px;
width: 100%;
color: #333;
border: 1px solid #a7a6a4;
background: #fff;
height: 45px;
font-family: 'Arial';
}
.contact_right .form-group textarea {
margin: 0;
padding: 10px;
width: 100%;
color: #333;
border: 1px solid #adaba9;
background: #fff;
height: 200px;
resize: none;
font-family: 'Arial';
}
.send_btn {
margin: 7px 0 0;
padding: 10px 20px;
font-family: 'Arial';
background: #000000;
color: #fff;
text-transform: uppercase;
font-size: 16px;
border: 1px solid #492902;
display: block;
height: 50px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
letter-spacing: 2px;
-o-transition: all 0.5s ease;
}
.send_btn:hover {
background: #66990c;
color: #fff;
border: 1px solid #66990c;
font-family: 'ARIAL';
letter-spacing: 2px;
}
.map_area {
width: 100%;
height: 300px;
margin-bottom: 20px;
}
.map_area iframe {
width: 100%;
height: 100%;
}
.contact_right .form-group {
margin-bottom: 23px;
}
.innerpage_wrapper {
width: 100%;
padding: 80px 0 80px;
display: inline-block;
}
.innerpage_wrapper img {
max-width: 410px;
float: left;
margin: 0 20px 20px 0;
}
.innerpage_wrapper p {
line-height: 24px;
color: #fff;
font-size: 15px;
font-weight: 300;
margin: 0 0 15px;
/* font-family: 'Arial'; */
}
div#comments {
display: none;
}
nav.navigation.post-navigation {
display: inline-block;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 996;
background: #a8e748;
width: 40px;
height: 40px;
border-radius: 50px;
transition: all 0.4s;
}
.back-to-top i {
font-size: 28px;
color: #000;
line-height: 0;
margin-right: 0px;
}
.back-to-top:hover {
background: #a8e748;
color: #fff;
}
.back-to-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
top: 20px;
}
#header .container {
max-width: 1297px !important;
}
#header .header-container {
background: #090909;
border: 1px solid #ffffff24;
border-radius: 5px;
padding: 7px 0px;
margin-top: 18px;
}
#header.header-scrolled {
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
top: 0;
}
#header .logo {
overflow: hidden;
padding: 2px 30px 2px 30px;
}
#header .logo h1 {
font-size: 26px;
padding: 0;
line-height: 1;
font-weight: 700;
}
#header .logo h1 a,
#header .logo h1 a:hover {
color: #fff;
text-decoration: none;
}
#header .logo img {
padding: 0;
margin: 0;
max-height: 70px;
}
@media (max-width: 575px) {
#header .logo img {
margin-left: 12px;
}
#header .header-container {
margin-top: 35px;
}
section#topbar {
font-size: 12px !important;
}
}
@media (max-width: 768px) {
}
@media (max-width: 992px) {
#header {
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
top: 0;
}
#header .logo {
padding-left: 0;
}
#header .logo h1 {
font-size: 24px;
}
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0px 45px;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
color: #fff;
transition: 0.3s;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
font-family: "Poppins", sans-serif;
white-space: nowrap;
transition: 0.3s;
}
.navbar a i,
.navbar a:focus i {
font-size: 28px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
color: #adff2f;
}
.navbar .getstarted,
.navbar .getstarted:focus {
padding: 10px 25px;
margin-left: 30px;
margin-right: 15px;
border-radius: 50px;
color: #fff;
border: 2px solid #adff2f;
}
.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
color: #fff;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 14px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
text-transform: none;
font-weight: 500;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
color: #009970;
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
@media (max-width: 575px) {
}
@media (max-width: 768px) {
}
@media (max-width: 991px) {
}
@media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
/** --------------------------------------------------------
* Mobile Navigation
----------------------------------------------------------*/
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
@media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(29, 28, 31, 0.9);
transition: 0.3s;
z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 300px;
bottom: 15px;
left: 15px;
padding: 10px 0;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a,
.navbar-mobile a:focus {
padding: 10px 20px;
font-size: 15px;
color: #36343a;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
color: #adff2f;
}
.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
margin: 15px;
}
.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
color: #adff2f;
}
.navbar-mobile .dropdown > .dropdown-active {
display: block;
}
@media (max-width: 575px) {
.navbar-mobile ul {
right: 20px;
}
.navbar .getstarted,
.navbar .getstarted:focus {
color: #000;
}
.navbar a i,
.navbar a:focus i {
line-height: 12px;
}
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
width: 100%;
background-size: cover;
position: relative;
}
#hero .container {
padding-top: 115px;
}
.combine-container-small-5 {
background: #a8e748;
margin: 20px;
color: #000;
border-radius: 5px;
padding: 40px 0px;
}
.combine-padding-global-8 {
padding: 50px 0px;
}
.combine-padding-section-large {
text-align: center;
}
#hero:before {
content: "";
background: rgba(0, 0, 0, 0.6);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#hero h1 span {
color: #adff2f;
}
@media (max-width: 575px) {
#hero h1 span {
font-weight: 600;
letter-spacing: 1px;
}
}
#hero h1 {
margin: 0 0 10px 0;
font-size: 54px;
font-weight: 700;
line-height: 70px;
color: #fff;
}
#hero h2 {
margin-bottom: 30px;
font-size: 18px;
font-weight: 500;
line-height: 28px;
}
#hero .btn-get-started {
font-weight: 600;
font-size: 14px;
display: inline-block;
padding: 20px 45px;
border-radius: 50px;
margin: 10px;
color: #000;
background: #a8e748;
}
#hero .btn-get-started:hover {
background: #b0e069;
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
@media (max-width: 768px) {
/* #hero {
height: 100vh;
} */
#hero .container {
padding-top: 60px;
}
#hero h1 {
font-size: 32px;
line-height: 36px;
}
}
@media (max-width: 575px) {
/* #hero .container {
padding-top: 200px;
} */
#hero .btn-get-started {
margin: 0px;
font-size: 18px;
padding: 20px 80px;
}
}
/*--------------------------------------------------------------
# Hero section
--------------------------------------------------------------*/
.text-block-46 {
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 14px;
color: #3c3c3c;
}
p.paragraph-32 {
font-size: 17px;
font-weight: 600;
letter-spacing: 2px;
}
p.f-paragraph-large-6 {
font-size: 52px;
font-weight: 400;
color: #3c3c3c;
}
.cards {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.cards_item {
display: flex;
padding: 1rem;
}
.card {
background-color: #000;
color: #fff;
}
.card_content {
padding: 1rem;
}
.card_title {
font-size: 22px;
font-weight: 700;
}
.card_text {
font-size: 15px;
color: #ffffffcf;
margin-bottom: 45px;
}
a.anchor_btn {
font-weight: 600;
color: #adff2f;
border-bottom: 1px solid #fff;
}
a.anchor_btn::after {
text-decoration: underline;
}
span.anchor-span {
color: #fff;
font-weight: 500;
}
button.card_btn {
padding: 12px 85px;
border-radius: 5px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 30px;
background: #adff2f;
border: none;
}
a.bottom_card_btn {
/* margin-left: 580px;*/
padding: 12px 35px;
border-radius: 50px;
font-weight: 600;
background: #adff2f;
border: none;
color: #000;
margin-top: 40px;
}
button.card_btn:hover {
background: #b0e069;
}
@media (min-width: 40rem) {
.cards_item {
width: 50%;
}
}
@media (min-width: 56rem) {
.cards_item {
width: 33.3333%;
}
}
section.hero_content {
margin-top: 126px;
}
.hero_content .text_title {
color: #ffffff70;
font-size: 17px;
margin-bottom: 18px;
}
.hero_content h2.text_head_1 {
font-size: 48px;
font-weight: 900;
letter-spacing: 2px;
margin-bottom: 22px;
}
h2.text_head_1 span {
color: #adff2f;
border-bottom: 4px solid;
}
.hero_content p.text_para {
margin-bottom: 22px;
}
input[type="email"] {
padding: 6px 10px;
border-radius: 5px;
margin-right: 30px;
color: #000;
border: none;
margin-bottom: 15px;
}
p.text_para_bottom {
color: #ffffff6b;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
button.card_btn {
padding: 12px 90px;
}
/* section.combine-section_cta2 {
margin-top: 600px;
} */
.counts {
display: none;
}
p.f-paragraph-large-6 {
font-size: 25px;
}
p.paragraph-32 {
font-size: 13px;
}
}
@media (max-width: 768px) {
}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
padding: 40px 0;
}
.section-bg {
text-align: center;
}
.section-title {
padding-bottom: 30px;
}
.section-title h2 {
font-size: 40px;
font-weight: 800;
text-transform: uppercase;
padding-bottom: 20px;
position: relative;
}
.section-title h2 span {
color: #adff2f;
}
.section-title h2::after {
content: "";
position: absolute;
display: block;
width: 50px;
height: 3px;
bottom: 0;
left: 0;
}
.section-title p {
margin-bottom: 0;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
}
@media (max-width: 768px) {
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content h2 {
font-weight: 700;
font-size: 48px;
line-height: 60px;
margin-bottom: 20px;
text-transform: uppercase;
}
.about .content h3 {
font-size: 48px;
font-weight: 600;
letter-spacing: 2px;
}
span.change-color {
color: #A8E748;
border-bottom: 2px solid;
}
img.verified-img {
width: 30px !important;
}
p.fst-italic i {
font-size: 26px;
margin: 0px 8px;
}
.about_me_content img {
width: 60px;
height: 60px;
border-radius: 50px;
object-fit: cover;
vertical-align: baseline;
}
.col-lg-4.aos-init.aos-animate img {
width: 100%;
}
p.fst-italic i:hover {
color: #a8e748;
}
.about .content ul {
list-style: none;
padding: 0;
}
.about .content ul li {
line-height: 30px;
font-size: 16px;
}
.about .content ul i {
left: 0;
top: 7px;
position: absolute;
font-size: 20px;
color: #009970;
}
.about .content p:last-child {
margin-bottom: 0;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
img.verified-img {
margin: 0px !important;
box-shadow: none !important;
}
.about .content h3 {
font-size: 38px;
}
}
@media (max-width: 768px) {
}
/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
padding: 40px 0 20px 0;
color: #adff2f;
}
.counts .counters span {
font-size: 55px;
display: block;
font-weight: 800;
}
.counts .counters p {
font-size: 15px;
color: #fff;
margin-bottom: 35px;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
}
@media (max-width: 768px) {
}
/*--------------------------------------------------------------
# Guide Access second
--------------------------------------------------------------*/
section.Access-Guide-sec img {
width: 100%;
}
button.bottom_card_btn {
margin-left: 580px;
padding: 12px 35px;
border-radius: 50px;
font-weight: 600;
background: #adff2f;
border: none;
margin-top: 40px;
}
button.bottom_card_btn:hover {
background: #b0e069;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
button.bottom_card_btn {
margin-left: 80px;
}
.card_image img {
object-fit: none;
width: 320px !important;
}
}
@media (max-width: 768px) {
}
/*--------------------------------------------------------------
# Get in Touch
--------------------------------------------------------------*/
.combine-padding-section-large_get_in_content {
padding: 0px 70px;
}
section.combine-section_cta2_get_in_touch {
margin: 0 240px;
text-align: center;
}
.text-block {
font-size: 30px;
font-weight: 800;
margin-bottom: 25px;
}
p.paragraph-4 {
text-align: start;
margin-bottom: 30px;
}
p.paragraph-4 span {
font-weight: 900;
text-decoration: underline;
}
p.paragraph-4 a {
color: #000;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
section.combine-section_cta2_get_in_touch {
margin: 0;
}
}
@media (max-width: 768px) {
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
padding: 15px 0;
background: #f6f6f7;
margin-top: 100px;
}
.breadcrumbs h2 {
font-size: 24px;
line-height: 1;
font-weight: 400;
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
}
.breadcrumbs ol li + li {
padding-left: 10px;
}
.breadcrumbs ol li + li::before {
display: inline-block;
padding-right: 10px;
color: #4f4c55;
content: "/";
}
@media (max-width: 768px) {
.breadcrumbs .d-flex {
display: block !important;
}
.breadcrumbs ol {
display: block;
}
.breadcrumbs ol li {
display: inline-block;
}
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.copyright {
text-align: center;
}
footer#footer {
border-top: 1px solid #ffffff40;
}
.container.py-4.footer {
background: #a8e748;
border-radius: 5px 5px 0px 0px;
color: #000;
font-weight: 600;
}
#footer .footer-top {
padding: 60px 0 30px 0;
background: #000;
}
#footer .footer-top .footer-contact {
margin-bottom: 30px;
}
#footer .footer-top .footer-contact h4 {
font-size: 22px;
margin: 0 0 30px 0;
padding: 2px 0 2px 0;
line-height: 1;
font-weight: 700;
}
#footer .footer-top .footer-contact p {
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: "Raleway", sans-serif;
color: #777777;
}
#footer .footer-top h4 {
font-size: 16px;
font-weight: bold;
color: #444444;
position: relative;
padding-bottom: 12px;
}
#footer .footer-top .footer-links {
margin-bottom: 30px;
}
#footer .footer-top .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
#footer .footer-top .footer-links ul i {
padding-right: 2px;
color: #00c28e;
font-size: 18px;
line-height: 1;
}
#footer .footer-top .footer-links ul li {
padding: 10px 0;
display: flex;
align-items: center;
}
#footer .footer-top .footer-links ul li:first-child {
padding-top: 0;
}
#footer .footer-top .footer-links ul a {
color: #777777;
transition: 0.3s;
display: inline-block;
line-height: 1;
}
#footer .footer-top .footer-links ul a:hover {
text-decoration: none;
color: #009970;
}
#footer .footer-newsletter {
font-size: 15px;
}
#footer .footer-newsletter h4 {
font-size: 30px;
font-weight: 800;
color: #fff;
}
.footer-newsletter p {
color: #ffffffbd;
font-size: 16px;
}
#footer .footer-newsletter form {
margin-top: 15px;
}
#footer .footer-newsletter form input[type="email"] {
padding: 6px 10px;
border-radius: 5px;
margin-right: 30px;
color: #000;
border: none;
margin-top: 30px;
}
input[type="submit"] {
padding: 6px 35px;
border-radius: 5px;
border: none;
background: #adff2f;
font-weight: 600;
color: #000;
}
#footer .footer-newsletter form input[type="submit"]:hover {
background: #b0e069;
}
#footer .credits {
padding-top: 5px;
font-size: 13px;
color: #444444;
}
#footer .social-links a {
font-size: 18px;
display: inline-block;
background: #009970;
color: #fff;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}
#footer .social-links a:hover {
color: #fff;
text-decoration: none;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
}
@media (max-width: 768px) {
}
/*--------------------------------------------------------------
# data filter Sections
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
padding: 6px 6px;
border-radius: 50px;
border: 1px solid #adff2f;
}
.portfolio #portfolio-flters li {
cursor: pointer;
display: inline-block;
padding: 17px 28px 17px 28px;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
color: #fff;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
border-radius: 50px;
font-family: "Poppins", sans-serif;
}
.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
color: #fff;
border: 2px solid #adff2f;
}
.portfolio #portfolio-flters li:last-child {
margin-right: 0;
}
.card_image img {
width: 100%;
margin-top: 10px;
}
.row.portfolio-container.aos-init.aos-animate {
height: auto !important;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
}
@media (max-width: 768px) {
}
/*-------------------------------------------
Resources box card
---------------------------------------------*/
img.box-image {
border-radius: 20px;
width: 500px;
height: 360px;
object-fit: inherit;
}
.box {
border: 1px solid #ffffff38;
border-radius: 15px;
padding: 30px 20px;
background: #2b324057;
height: 732px;
}
h3.box-heading {
margin-top: 20px;
font-size: 17px;
font-weight: 600;
}
p.box-para {
font-weight: 600;
color: #ffffffb0;
}
.box ul li {
line-height: 40px;
font-size: 16px;
font-weight: 600;
color: #ffffffd6;
display: flex;
align-items: center;
}
.box ul li i {
color: #adff2f;
font-size: 30px;
margin: 2px;
}
a.buy-btn {
color: #adff2f;
font-weight: 600;
}
a.buy-btn span {
margin: 10px;
font-size: 20px;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
img.box-image {
width: -webkit-fill-available;
}
.box {
margin-bottom: 20px;
height: 732px;
}
}
@media (max-width: 768px) {
}
/*--------------------------------------------------------------
# Faq Timelines
--------------------------------------------------------------*/
section.faq-timeline {
padding: 165px 0px;
position: relative;
}
.mapWrapper {
position: absolute;
width: 75%;
left: 50%;
bottom: 8%;
transform: translateX(-50%);
}
.mapWrapper .row {
position: relative;
width: 100%;
left: 0;
height: 104px;
}
.mapWrapper .row .itemBar {
position: relative;
display: inline-block;
width: 33.3333333333%;
height: 0.25em;
margin-top: 6.875em;
background: #A8E748;
}
.mapWrapper .row .itemBar .itemInfo {
position: absolute;
width: 100%;
bottom: 0.5em;
text-align: center;
}
.mapWrapper .row .itemBar .itemInfo:after {
content: "";
position: absolute;
width: 0.5em;
height: 0.25em;
background: #A8E748;
border-radius: 3em 3em 0 0;
left: 50%;
transform: translateX(-50%);
bottom: -0.25em;
transition: width 0.2s ease-in, height 0.2s ease-in;
}
.mapWrapper .row .itemBar:hover .itemInfo:after {
width: 2.5em;
height: 0.25em;
transition: width 0.2s ease-in, height 0.2s ease-in;
}
.mapWrapper .row .itemBar .itemDate {
position: absolute;
width: 100%;
font-size: 1.25em;
top: 0.25em;
text-align: center;
text-shadow: 1px 1px 2px black;
}
.mapWrapper .row:nth-child(2n) .itemBar:first-child:after {
content: "";
position: absolute;
width: 1.75em;
height: 6.75em;
right: 100%;
top: 0;
border-radius: 7em 0 0 7em;
border: 0.25em solid #A8E748;
border-right: unset;
}
.mapWrapper .row:nth-child(2n+1) .itemBar:last-child:after {
content: "";
position: absolute;
width: 1.75em;
height: 6.75em;
left: 100%;
top: 0;
border-radius: 0 7em 7em 0;
border: 0.25em solid #A8E748;
border-left: unset;
}
.mapWrapper .row:last-child .itemBar:after {
display: none;
}
@media (max-width: 575px) {
.mapWrapper .row .itemBar .itemInfo {
font-size: 12px;
}
.mapWrapper .row .itemBar .itemDate {
font-size: 16px;
}
}
/*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/
section#faq {
background: #000;
color: #fff;
}
.faq .faq-list {
padding: 0 100px;
}
.faq .faq-list ul {
padding: 0;
list-style: none;
}
.faq .faq-list li + li {
margin-top: 15px;
}
.faq .faq-list li {
padding: 20px;
background: #000;
border-radius: 4px;
position: relative;
color: #fff;
border: 1px solid #ffffff3d;
}
.faq .faq-list a {
display: block;
position: relative;
font-size: 20px;
line-height: 24px;
font-weight: 600;
outline: none;
cursor: pointer;
text-align: start;
margin-bottom: 10px;
}
.faq .faq-list .icon-help {
font-size: 24px;
position: absolute;
right: 0;
left: 20px;
color: #47b2e4;
}
.faq .faq-list .icon-show,
.faq .faq-list .icon-close {
font-size: 24px;
position: absolute;
right: 0;
top: 0;
color: #adff2f;
}
@media (max-width: 575px) {
.faq .faq-list .icon-show,
.faq .faq-list .icon-close {
right: -21px;
}
}
.faq .faq-list p {
margin-bottom: 0;
padding: 10px 0 0 0;
text-align: start;
font-size: 20px;
}
.faq .faq-list .icon-show {
display: none;
}
.faq .faq-list a.collapsed {
transition: 0.3s;
text-align: start;
font-weight: 600;
}
.faq .faq-list a.collapsed:hover {
}
.faq .faq-list a.collapsed .icon-show {
display: inline-block;
}
.faq .faq-list a.collapsed .icon-close {
display: none;
}
@media (max-width: 1200px) {
.faq .faq-list {
padding: 0;
}
}
@media (max-width: 575px) {
.faq .faq-list p {
font-size: 16px;
}
}
/*--------------------------------------------------------------
# About hero Section
--------------------------------------------------------------*/
img.hero-Profile {
width: 250px;
border-radius: 50%;
height: auto;
object-fit: cover;
max-width: 100%;
margin-top: 30px;
margin-bottom: 30px;
}
h1.hero-head {
font-size: 70px !important;
line-height: 95px !important;
font-weight: 100 !important;
}
p.hero-para {
font-size: 21px;
color: #ffffffb0;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
p.hero-para {
font-size: 16px;
text-align: center;
}
h1.hero-head {
font-size: 32px !important;
line-height: 60px !important;
font-weight: 100 !important;
}
}
@media (max-width: 768px) {
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services-title h2 {
font-weight: 600;
text-align: start;
font-size: 35px;
padding-bottom: 25px;
}
.services-title h2 span {
color: #adff2f;
}
.services-title p {
text-align: start;
}
.services-images img {
width: 100px;
height: auto;
}
.services-images h5 {
font-size: 16px;
}
.services-images {
text-align: start;
border-right: 1px solid #ffffff42;
margin-right: 200px;
}
.services .icon-box {
text-align: center;
padding: 40px 20px;
transition: all ease-in-out 0.3s;
border: 1px solid #ffffff14;
border-radius: 5px;
}
.services .icon-box .icon {
margin: 0 auto;
height: auto;
}
.services .icon-box .icon i {
font-size: 28px;
}
.services .icon-box h4 {
font-weight: 700;
margin-bottom: 15px;
font-size: 24px;
}
.services .icon-box h4 a {
transition: ease-in-out 0.3s;
}
.services .icon-box p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.services .icon-box:hover {
border-color: #a8e748;
box-shadow: 0px 0 20px 0 rgba(146, 235, 73, 0.836);
}
.services .icon-box:hover h4 a {
color: #a8e748;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
}
@media (max-width: 768px) {
}
/*--------------------------------------------------------------
# Top header course
--------------------------------------------------------------*/
.contact-info p {
text-align: center;
font-size: 17px;
font-weight: 600;
color: #000;
letter-spacing: 2px;
}
section#topbar {
background: #a8e748;
padding: 8px 0px;
}
.course-header {
background: #46424247 !important;
padding: 8px 0px;
}
.course_img img {
width: 100%;
}
.col-lg-6.about_me_content.aos-init.aos-animate {
margin-top: 50px;
}
.about_me_content h4 {
font-size: 44px;
font-weight: 900;
}
.about_me_content h4 span {
color: #adff2f;
}
a.enroll-btn-get-started {
background: #adff2f;
padding: 22px 60px;
border-radius: 50px;
color: #000;
font-weight: 600;
}
.about_bottom {
background: #ffffff14 !important;
}
div#w-node-cb0bd6f4-1675-6d78-0e85-528551d31cc1-8ba5e404 {
padding-left: 250px;
}
p.text-62 {
font-size: 20px;
}
strong.bold-text-146 {
color: #adff2f;
font-size: 18px;
}
strong.bold-text-141 {
font-size: 20px;
}
span.text-span-215 {
color: #adff2f;
font-size: 24px;
}
strong.bold-text-142 {
font-size: 20px;
}
strong.bold-text-147 {
color: #adff2f;
}
.about_bottom ul li {
list-style-type: disc;
margin: 30px 0px;
text-transform: capitalize;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
div#w-node-cb0bd6f4-1675-6d78-0e85-528551d31cc1-8ba5e404 {
padding-left: 0px;
}
img.about-sec-img {
display: none;
}
}
@media (max-width: 768px) {
}
/** --------------------------------------------------------
* Count sec
----------------------------------------------------------*/
.counters h4 {
text-align: center;
}
h4.count-heading {
font-size: 50px;
font-weight: 900;
}
p.fst-italic {
text-align: start;
}
p.count-paragraph {
text-align: center;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
}
@media (max-width: 768px) {
}
/*------------------------------------------------
3fs section
------------------------------------------------*/
.fs-section {
padding-left: 300px;
}
.rich-text-block.w-richtext h6 {
font-size: 25px;
font-weight: 700;
}
.rich-text-block.w-richtext p strong {
font-weight: 900;
font-size: 22px;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
.fs-section {
padding-left: 25px;
}
}
@media (max-width: 768px) {
}
/* ----------------------------------------------
Business System Start
---------------------------------------------- */
figure.w-richtext-align-fullwidth.w-richtext-figure-type-image img {
width: 800px;
height: auto;
}
section.Business.System {
text-align: center;
}
section.Business.System p {
text-align: start;
padding-left: 275px;
margin-bottom: 15px;
cursor: pointer;
}
strong.bold-text-copy {
color: #adff2f;
text-decoration: underline;
}
.fn-heading-5-no-margin-3 {
font-size: 25px;
}
strong.bold-text-124 {
color: #adff2f;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
figure.w-richtext-align-fullwidth.w-richtext-figure-type-image img {
width: 100%;
}
section.Business.System p {
padding-left: 18px;
}
}
@media (max-width: 768px) {
}
/** --------------------------------------------------------
* Digital-creation
----------------------------------------------------------*/
section.Digital-creation {
text-align: center;
}
@media (max-width: 575px) {
.w-richtext video {
display: none;
}
}
/** --------------------------------------------------------
* Popup Section
----------------------------------------------------------*/
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border-radius: 5px;
background: #a8e748;
color: #000;
z-index: 1;
}
.popup h2 {
margin-bottom: 20px;
}
.popup input,
.popup button {
margin-bottom: 10px;
border-radius: 5px;
border: none;
padding: 10px;
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
.popup {
margin-top: 88px;
}
}
@media (max-width: 768px) {
}
/** --------------------------------------------------------
* Form Section
----------------------------------------------------------*/
.signupform {
margin-top: 135px;
}
.form_left p {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #6b6b6b;
max-width: 440px;
margin-bottom: 33px;
}
form label {
font-weight: 600;
font-size: 16px;
line-height: 24px;
}
form .form-group.col-md-12 input,
form .form-group.col-md-12 .input[type="submit"] {
width: 598px !important;
max-width: 100%;
}
.form-right .form_heading {
background: #a8e748;
height: 100%;
border-radius: 24px;
text-align: center;
padding: 132px 44px 129px 44px;
position: relative;
margin-bottom: 20px;
}
.form-right .form_heading h4 {
font-weight: 700;
font-size: 31px;
line-height: 34px;
text-align: center;
color: #ffffff;
margin-bottom: 30px;
}
input[type="submit"] {
margin-top: 20px;
}
button.cart_btn {
background: #adff2f;
border: none;
border-radius: 50px;
font-weight: 600;
margin-left: 4px;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
.form-right .form_heading {
margin-top: 20px;
}
}
@media (max-width: 768px) {
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services-title h2 {
font-weight: 600;
text-align: start;
font-size: 35px;
padding-bottom: 25px;
}
.services-title h2 span {
color: #adff2f;
}
.services-title p {
text-align: start;
}
.services-images img {
width: 100px;
height: auto;
}
.services-images h5 {
font-size: 16px;
}
.services-images {
text-align: start;
border-right: 1px solid #ffffff42;
margin-right: 200px;
}
.services .icon-box {
text-align: center;
padding: 40px 20px;
transition: all ease-in-out 0.3s;
border: 1px solid #ffffff14;
border-radius: 5px;
}
.services .icon-box .icon {
margin: 0 auto;
height: auto;
}
.services .icon-box .icon i {
font-size: 28px;
}
.services .icon-box h4 {
font-weight: 700;
margin-bottom: 15px;
font-size: 24px;
}
.services .icon-box h4 a {
transition: ease-in-out 0.3s;
}
.services .icon-box p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.services .icon-box:hover {
border-color: #a8e748;
box-shadow: 0px 0 20px 0 rgba(146, 235, 73, 0.836);
}
.services .icon-box:hover h4 a {
color: #a8e748;
}
@media (max-width: 991px) {
}
@media (max-width: 575px) {
}
@media (max-width: 768px) {
}
/* ------------------------------
ExplorePage Css
---------------------------------*/
.Aihero-content {
text-align: center;
margin-top: 70px;
}
h2.Aihero-content-heading {
font-size: 45px;
font-weight: 600;
letter-spacing: 1px;
}
span.ai-heading-span {
font-size: 22px;
color: #ffffff85;
font-weight: 600;
letter-spacing: 1px;
}
figure.w-richtext-align-fullwidth.w-richtext-figure-type-video {
margin-bottom: 60px;
}
a.ai-enroll-btn-get-started {
background: #adff2f;
padding: 18px 55px;
color: #000;
letter-spacing: 1px;
font-weight: 600;
font-size: 30px;
border-radius: 10px;
}
h6.btn-bottom {
margin-top: 30px;
font-weight: 600;
letter-spacing: 2px;
}
.community-content {
display: flex;
margin-bottom: 45px;
border: 2px dashed;
border-radius: 5px;
padding: 20px;
}
.Community-section h2 {
text-align: center;
font-size: 40px;
font-weight: 600;
}
video.community-video {
/* margin-left: 85px; */
height: 300px;
width: 350px;
}
@media (max-width: 768px) {
.community-video {
display: block;
width: 100% !important;
height: auto !important;
margin: 10px auto;
}
.col-lg-3 {
width: 100% !important;
display: block;
}
}
.community-content h4 {
font-size: 32px;
text-align: center;
font-weight: 600;
padding: 25px;
letter-spacing: 1px;
}
img.results-img {
width: 100%;
box-shadow: 0 0 8px 2px #fff;
border-radius: 5px;
}
.ai-Automation-bottom {
text-align: center;
}
.ai-Automation-rich-text-block h6 {
font-size: 25px;
margin-bottom: 25px;
}
.ai-Automation-rich-text-block p {
margin-bottom: 35px;
font-size: 25px;
}
section.subscriber-update {
text-align: center;
}
h4.subscriber-heading {
text-decoration: underline;
padding: 40px;
letter-spacing: 1px;
}
.combine-container-large-3 {
margin-top: 50px;
text-align: center;
}
h6.ai-Automation-heading {
text-align: center;
font-weight: 600;
letter-spacing: 2px;
text-decoration: underline;
}
p.ai-para-heading {
text-align: center;
font-size: 30px;
margin-top: 60px;
letter-spacing: 1px;
}
.whatinside-section {
margin: 0 240px;
border-top: 1px solid #ffffff6b;
}
section.whatinside-section p {
text-align: center;
letter-spacing: 1px;
}
.whatinside_content {
padding: 0 40px;
}
.whatinside-section h2 {
text-align: center;
padding: 10px 25px;
font-weight: 600;
letter-spacing: 1px;
}
.whatinside_content ul li {
margin: 15px;
letter-spacing: 1px;
font-weight: 600;
}
p.longlist-para {
text-align: center;
font-size: 38px;
font-weight: 600;
letter-spacing: 1px;
color: #000000b8;
}
.longlist-content {
text-align: center;
}
.longlist-img img {
width: 450px;
}
img.community-img {
width: 100%;
}
.lifetime-access-content {
text-align: center;
padding: 0px 90px;
}
.lifetime-access-content img {
border-radius: 50%;
object-fit: cover;
width: 200px;
}
.lifetime-access-content h4 {
font-size: 40px;
font-weight: 600;
margin: 35px;
letter-spacing: 2px;
}
.lifetime-access-content p {
letter-spacing: 1px;
padding: 0px 35px;
}
.shop_sec {
margin-top: 40px;
}
.shop_sec .card_image img{
width: 100%;
margin-top: 10px;
height: 200px;
}
.shop_sec .card {
border: 1px solid #605454;
margin-bottom: 32px;
}
a.cart_btn {
background: #adff2f;
border: none;
border-radius: 50px;
font-weight: 600;
margin-left: 4px;
color: #000;
padding: 2px 6px;
}
.shop_sec h2{
text-align: center;
}
.innerpage_wrapper {
width:100%;
padding:155px 0 30px 0;
}
.heading01 {
background-image: url("https://subhaminsights.com/wp-content/uploads/2024/03/bg-login-scaled.jpg");
background-repeat: no-repeat;
background-position: center;
padding: 40px 51px;
border-radius: 10px;
background-size: cover;
box-shadow: 0px 12px 16px 2px #423a3a75;
}
.heading01 h1 {
margin-bottom: 45px;
font-size: 55px;
font-weight: 600;
letter-spacing: 1px;
}
span.text-circle {
background: #ffffff;
color: #000;
padding: 10px 6px;
border-radius: 50%;
box-shadow: 0px 0px 10px 1px #a8e748;
}
.mission_inn {
background: #A8E748;
padding: 20px;
color: #000;
text-align: center;
border-radius: 5px;
margin-bottom: 20px;
}
.mission_inn h3 {
padding-bottom: 15px;
font-weight: 600;
}
@media only screen and (min-width:200px) and (max-width:767px) {
main#main {
margin-top: 60px;
}
h2.Aihero-content-heading {
font-size: 30px;
padding: 10px;
}
.whatinside-section {
margin: 0px;
}
a.ai-enroll-btn-get-started {
padding: 18px 30px;
font-size: 25px;
}
.whatinside_content {
padding: 0 8px;
}
span.ai-heading-span {
font-size: 14px;
}
h6.btn-bottom {
font-size: 12px;
}
.longlist-img img {
width: 100%;
}
img.community-img {
display: none;
}
.lifetime-access-content {
padding:0px;
}
section.Community-section {
padding: 0 15px;
}
.heading01 {
margin-bottom: 30px;
}
.heading01 h1 {
margin-bottom: 20px;
font-size: 35px;
}
p.longlist-para {
font-size: 28px;
}
.ai-Automation-rich-text-block p {
font-size: 22px;
text-align: left;
}
img.results-img {
margin-bottom: 20px;
}
.Community-section h2 {
font-size: 32px;
}
}
/* ------------------------------
Aitools Css Start
---------------------------------*/
i {
color: #a8e748;
margin-right: 15px;
}
#heraitools h1 {
font-size: 50px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 25px;
}
img.heading-ai-img {
width: 65px;
}
span.underline-text {
border-bottom: 4px solid #fff;
}
span.color-bg {
background: #a8e748;
color: #000;
line-height: 40px;
}
span.color-22 {
color: #a8e748;
}
#heraitools h2 {
font-size: 25px;
letter-spacing: 1px;
font-weight: 600;
margin-bottom: 30px;
}
ul.key-points li {
font-size: 22px;
font-weight: 600;
letter-spacing: 1px;
}
ul.key-points i {
color: #a8e748;
margin-right: 15px;
}
.bottom-list {
display: flex;
align-items: center;
justify-content: space-between;
}
.bottom-list li {
display: flex;
align-items: center;
justify-content: center;
background: #b5b4b4;
color: #000;
margin-right: 16px;
padding: 0px 16px;
font-weight: 600;
border-radius: 10px;
}
.bottom-list {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 45px;
}
.para-bottom {
text-align: left;
font-size: 20px;
font-weight: 600;
margin-bottom: 85px;
}
.hero-bottom-right img {
width: 100%;
border-radius: 10px;
}
a.btn-34 i {
color: #000;
}
a.btn-34 {
background: #a8e748;
color: #000;
padding: 26px 18px;
font-weight: 600;
border-radius: 10px;
font-size: 20px;
}
section.aihero-bottom {
text-align: center;
}
.partners {
width: 100%;
background: #ffffffe3;
padding: 15px;
border-radius: 10px;
}
marquee img {
width: 130px;
max-width: 100%;
margin-right: 30px;
}
.trust-pilot {
text-align: center;
}
#trust-bg22 {
background: #fff;
color: #000;
padding: 20px;
border-radius: 10px;
margin-bottom: 30px;
}
.trust-pilot h5 {
font-size: 26px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 40px;
}
.trust-left-content img {
width: 115px;
}
.trust-left-content h6 {
font-weight: 600;
margin: 10px 0;
}
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
}
.testimonial-item {
text-align: left;
background: #f5f5f5;
padding: 10px 20px;
height: 250px;
border-radius: 10px;
margin-top: 30px;
}
.testimonial-item h4 {
font-size: 15px;
font-weight: 600;
margin-top: 8px;
}
.testimonial-item p {
font-size: 14px;
font-weight: 600;
color: #0009;
}
.testimonial-item img {
border-radius: 50px;
}
.testimonial-item h3 {
font-size: 15px;
font-weight: 600;
display: inline-flex;
margin-left: 8px;
}
.testimonials .testimonial-item {
box-sizing: content-box;
padding: 30px 30px 30px 60px;
margin: 30px 10px 30px 50px;
min-height: 200px;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.08);
position: relative;
background: #fff;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 15px auto 15px auto;
color: #000;
}
.testimonials .testimonial-item .testimonial-img {
width: 90px;
border-radius: 50px;
border: 6px solid #fff;
position: absolute;
left: -45px;
}
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #111;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #999;
margin: 0;
}
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
color: #e8ecf5;
font-size: 26px;
}
.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -5px;
position: relative;
top: 10px;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 15px auto 15px auto;
color: #000;
}
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #5777ba;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: #5777ba;
}
p.bottom-para1 {
font-size: 30px;
letter-spacing: 1px;
font-weight: 600;
}
p.bottom-para2 {
font-size: 40px;
letter-spacing: 1px;
font-weight: 600;
}
.Course-join {
text-align: center;
background: #fff;
color: #000;
}
.Course-join h3 {
font-size: 35px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 30px;
}
.content-p p {
border: 2px solid;
padding: 15px 12px;
border-radius: 10px;
font-size: 20px;
width: 355px;
height: 100px;
font-weight: 600;
text-align: left;
color: #565555;
}
.content-p i {
color: #000;
}
h4.text-76 {
font-size: 35px;
margin-bottom: 25px;
}
ul.course-points li {
font-size: 24px;
color: #585454;
}
ul.course-points i {
color: #000;
}
.top-companiesAi h3 {
font-size: 40px;
}
.companiesAi-content img {
max-width: 100%;
height: 125px;
margin-bottom: 20px;
}
.companiesAi-content p {
font-size: 38px;
color: #ff0000;
}
.ai-jobs {
text-align: center;
background: #fff;
color: #000;
}
section.ai-jobs h2 {
font-size: 35px;
font-weight: 600;
margin-bottom: 40px;
}
img.ai-news-img {
width: 100%;
border: 2px solid #000;
border-radius: 5px;
margin-bottom: 25px;
}
p.ai-jobs-para {
font-size: 35px;
margin-bottom: 35px;
}
button.btn-12 {
border: none;
padding: 8px 14px;
background: #a8e748;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
border-radius: 10px;
}
#learn-workshop p {
font-size: 18px;
font-weight: 600;
color: #747272;
margin-bottom: 30px;
padding: 0 105px;
}
span.anchor-text {
font-size: 16px;
}
span.line-through {
text-decoration: line-through;
}
button.btn-12 i {
color: #000;
}
.Learn-workshop-content {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
background: #f1f1f1;
padding: 10px 15px;
height: 80px;
border-radius: 5px;
}
.Learn-workshop-content img {
width: 50px;
margin-right: 20px;
mix-blend-mode: darken;
}
.Learn-workshop-content h3 {
font-weight: 600;
text-align: left;
font-size: 26px;
}
p.btn-bottom-p {
margin-top: 20px;
color: #000 !important;
font-size: 15px !important;
letter-spacing: 1px;
font-weight: 600;
}
.register {
text-align: center;
padding: 10px 0px;
}
.register h2 {
font-size: 40px;
font-weight: 600;
}
.register span.color-22 {
font-size: 30px;
}
.bonus-sec {
text-align: center;
background: #fff;
color: #000;
}
.bonus-content img {
width: 60px;
max-width: 100%;
mix-blend-mode: darken;
}
.bonus-content {
background: #edecec;
border-radius: 10px;
height: 290px;
margin-bottom: 30px;
}
.bonus-content h4 {
position: relative;
bottom: 12px;
margin: 0 auto;
background: #000;
color: #a8e748;
width: 140px;
padding: 5px;
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
border-radius: 5px;
margin-bottom: 20px;
}
.bonus-content p {
font-weight: 600;
font-size: 30px;
line-height: 28px;
margin-top: 30px;
color: #000000b3;
}
.bonus-content button {
border-radius: 5px;
padding: 8px 15px;
font-weight: 600;
}
.bonus-sec .btn-12 {
margin-bottom: 30px;
}
.certification {
text-align: center;
}
.certification h2 {
font-size: 32px;
letter-spacing: 1px;
font-weight: 600;
margin-bottom: 20px;
}
.certification p {
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 30px;
}
.certification-content img {
width: 100%;
border-radius: 10px;
margin-bottom: 35px;
}
.mentor {
text-align: center;
background: #fff;
color: #000;
}
img.mentor-img {
width: 500px;
height: 600px;
object-fit: cover;
}
.right-content {
text-align: left;
}
.mentor h2 {
font-size: 40px;
margin-bottom: 30px;
font-weight: 600;
}
.right-content h4 {
font-weight: 600;
letter-spacing: 1px;
font-size: 32px;
}
.right-content p {
font-size: 18px;
}
.company-img img {
width: 150px;
background: #fff;
margin-right: 20px;
}
.company-founded {
text-align: center;
padding: 25px;
}
.company-founded h5 {
font-size: 35px;
margin-bottom: 25px;
}
.Note {
text-align: center;
background: #fff;
color: #000;
}
.Note h3 {
font-size: 35px;
margin-bottom: 25px;
}
p.para-note {
font-size: 18px;
font-weight: 600;
color: #0009;
}
.faq {
text-align: center;
background: #fff;
color: #000;
}
details.faq-box {
line-height: 60px;
padding: 0 150px;
}
.faq-header {
font-weight: 600;
user-select: none;
text-align: left;
cursor: pointer;
border-bottom: 1px solid #00000052;
color: #000000bd;
}
.faq-content p {
text-align: left;
margin: 0;
font-size: 18px;
line-height: 42px;
}
.faq button.btn-12 {
margin-top: 35px;
}
footer.footer-ai {
padding: 10px;
text-align: center;
}
img.footer-img {
width: 150px;
}
@media (max-width: 575px) {
#heraitools h1 {
font-size: 34px;
line-height: 55px;
}
img.heading-ai-img {
display: none;
}
#heraitools h2 {
font-size: 22px;
}
.hero-bottom-right img {
margin-bottom: 20px;
}
button.btn-12 {
padding: 0px;
font-size: 18px;
margin: 10px;
}
section.aihero-bottom h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
}
.trust-pilot h5 {
font-size: 16px;
padding: 0 25px;
letter-spacing: 0px;
}
.trust-pilot {
padding: 10px;
}
.testimonial-item {
height: 285px;
}
p.bottom-para1 {
font-size: 22px;
}
p.bottom-para2 {
font-size: 20px;
}
.Course-join h3 {
font-size: 22px;
}
ul.key-points li {
font-size: 17px;
line-height: 30px;
}
.bottom-list {
display: none;
}
.content-p p {
width: 300px;
height: auto;
}
h4.text-76 {
font-size: 22px;
font-weight: 600;
}
ul.course-points li {
font-size: 18px;
}
.companiesAi-content img {
height: 95px;
}
.companiesAi-content p {
font-size: 26px;
}
section.ai-jobs h2 {
font-size: 22px;
}
p.ai-jobs-para {
font-size: 19px;
font-weight: 600;
}
img.mentor-img {
width: 100%;
height: auto;
}
details.faq-box {
padding: 0px;
}
.company-img img {
margin-bottom: 20px;
}
#learn-workshop p {
padding: 0 10px;
}
.Learn-workshop-content h3 {
font-size: 22px;
}
.register h2 {
font-size: 20px;
}
.register span.color-22 {
font-size: 16px;
}
.bonus-content p {
font-size: 18px;
}
.bonus-sec .btn-12 {
padding: 10px 5px;
}
.certification h2 {
font-size: 22px;
}
.certification p {
font-size: 13px;
}
.mentor h2 {
font-size: 25px;
}
.right-content h4 {
font-size: 22px;
}
.right-content p {
font-size: 15px;
}
.company-founded h5 {
font-size: 18px;
}
.Note h3 {
font-size: 20px;
}
p.para-note {
font-size: 15px;
}
.faq h1 {
font-size: 22px;
font-weight: 600;
}
}
@media (max-width: 768px) {
}
@media (max-width: 991px) {
}
/* ------------------------------
Aitools Css End
---------------------------------*/
/* Funnel Rescource page css */
/* [1] From first YouTube embed (.video-wrap) */
.video-wrap{position:relative; width:100%; max-width:1200px; margin:0 auto;}
.video-wrap::before{content:""; display:block; padding-top:56.25%;} /* 16:9 */
.video-wrap iframe{
position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:8px;
}
/* [2] Dealbar / Countdown / CTA */
.dealbar{background:#000; color:#fff; padding:24px 18px; border-top:1px solid rgba(255,255,255,.08);}
.dealbar-inner{max-width:1050px; margin:0 auto; display:flex; align-items:center; gap:22px; justify-content:space-between; flex-wrap:wrap}
.deal-pill{display:inline-block; background:#1e90ff; color:#fff; padding:6px 10px; border-radius:8px; font-weight:700; font-size:.85rem; letter-spacing:.2px}
.deal-title{margin:.35rem 0 0; font-size:1.35rem; font-weight:800}
.deal-price{color:#9dff00}
.deal-sub{margin:.25rem 0 0; color:#cfcfcf; font-size:.95rem}
.deal-timer{display:flex; align-items:center; gap:12px; font-variant-numeric:tabular-nums; margin-left:auto}
.tbox{display:flex; flex-direction:column; align-items:center; min-width:70px}
.tbox span{font-size:1.8rem; font-weight:800; line-height:1}
.tbox small{margin-top:6px; font-size:.73rem; letter-spacing:.18em; color:#bdbdbd}
.tsep{font-size:1.8rem; opacity:.7}
.deal-cta{background:#1e90ff; color:#fff; padding:12px 18px; border-radius:10px; font-weight:800; text-decoration:none; box-shadow:0 6px 20px rgba(30,144,255,.25); transition:.2s; white-space:nowrap}
.deal-cta:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(30,144,255,.35)}
.deal-cta.green{background:#9dff00; color:#000; box-shadow:0 6px 20px rgba(157,255,0,.25)}
.deal-cta.green:hover{box-shadow:0 10px 24px rgba(157,255,0,.35)}
@media (max-width:900px){
.dealbar-inner{gap:14px}
.deal-timer{order:3; width:100%; justify-content:center; margin:10px 0}
}
@media (max-width:520px){
.tbox{min-width:62px}
.tbox span{font-size:1.6rem}
.deal-title{font-size:1.15rem}
}
/* [3] Hero/video layout helpers (first block) */
.hero-figure{
clear: both;
margin: 0 auto 24px;
max-width: 1100px;
width: 100%;
display: block;
z-index: 1;
position: relative;
}
.video-wrapper{
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* modern browsers */
background: #000;
border-radius: 12px;
overflow: hidden;
}
@supports not (aspect-ratio: 16 / 9){
.video-wrapper{ height: 0; padding-top: 56.25%; }
.video-wrapper .hero-iframe{ position: absolute; inset: 0; }
}
.hero-iframe{
width: 100% !important;
height: 100% !important;
display: block;
border: 0;
}
@media (max-width: 480px){
.hero-figure{ margin-bottom: 16px; }
.video-wrapper{ border-radius: 10px; }
}
/* [4] AIHero content section + duplicate responsive player styles (second block) */
.Aihero-content {
width: 100%;
text-align: center;
padding: 4rem 1.5rem;
background: #000;
color: #fff;
}
.Aihero-content-heading {
font-size: 2rem;
line-height: 1.3;
font-weight: 600;
max-width: 900px;
margin: 0 auto 2rem;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
margin: 0 auto 2rem;
max-width: 1000px;
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ai-enroll-btn-get-started {
display: inline-block;
background: #6fff00;
color: #000;
font-weight: 700;
padding: 1rem 2rem;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.ai-enroll-btn-get-started:hover {
background: #9fff33;
transform: scale(1.03);
}
@media (max-width: 1024px) {
.Aihero-content-heading { font-size: 1.8rem; }
}
@media (max-width: 768px) {
.Aihero-content { padding: 3rem 1rem; }
.Aihero-content-heading { font-size: 1.5rem; }
.ai-enroll-btn-get-started { padding: 0.9rem 1.8rem; }
}
@media (max-width: 480px) {
.Aihero-content-heading { font-size: 1.3rem; line-height: 1.4; }
.ai-enroll-btn-get-started { font-size: 0.9rem; padding: 0.8rem 1.6rem; }
}
.hero-figure { margin: 0 auto 24px; max-width: 1100px; width: 100%; }
.video-wrapper {
position: relative; width: 100%; aspect-ratio: 16 / 9;
background:#000; border-radius:16px; overflow:hidden;
box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
@supports not (aspect-ratio: 16/9) {
.video-wrapper { padding-top: 56.25%; height: 0; }
.video-wrapper .hero-video { position: absolute; inset: 0; }
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
outline: none;
border: 0;
}
@media (max-width: 1024px) { .hero-figure { max-width: 900px; } }
@media (max-width: 768px) { .hero-figure { max-width: 100%; } }
/* [5] Testimonial section + responsive grid */
.testimonial-section {
background:#000;
color:#fff;
padding:5rem 1.5rem;
text-align:center;
}
.testimonial-heading {
font-size:2.4rem;
font-weight:700;
margin-bottom:.5rem;
}
.testimonial-sub {
color:#aaa;
font-size:1.1rem;
margin-bottom:3rem;
}
.testimonial-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem;
max-width:1200px;
margin:0 auto;
}
.testimonial-card {
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
border-radius:12px;
padding:2rem;
text-align:left;
position:relative;
overflow:hidden;
}
.testimonial-card.dark { background:#111; }
.testimonial-quote { font-size:3rem; color:#6fff00; line-height:1; margin-bottom:1rem; }
.testimonial-text { color:#ddd; font-size:1rem; line-height:1.6; margin-bottom:1.5rem; }
.testimonial-profile { display:flex; align-items:center; gap:1rem; }
.testimonial-profile img { width:55px; height:55px; border-radius:50%; object-fit:cover; border:2px solid #6fff00; }
.testimonial-profile h4 { margin:0; font-size:1rem; font-weight:600; }
.testimonial-profile p { margin:0; font-size:.85rem; color:#aaa; }
/* Chat-style testimonials */
.testimonial-image { width:100%; border-radius:8px; margin-bottom:1rem; }
.testimonial-chat { font-style:italic; font-size:.95rem; color:#eee; line-height:1.6; margin-bottom:.5rem; }
.testimonial-name { display:block; font-size:.85rem; color:#9dff00; font-weight:500; }
/* Duplicate hero/video bits present in source */
.hero-figure { margin: 0 auto 24px; max-width: 1100px; width: 100%; }
.video-wrapper {
position: relative; width: 100%; aspect-ratio: 16/9;
background:#000; border-radius:16px; overflow:hidden;
box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
@supports not (aspect-ratio: 16/9) {
.video-wrapper { padding-top:56.25%; height:0; }
.video-wrapper .hero-video { position:absolute; inset:0; }
}
.hero-video { width:100%; height:100%; border:0; display:block; }
@media (max-width:1024px){ .testimonial-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:700px){ .testimonial-grid{grid-template-columns:1fr;} }
/* [6] Bonus section styles (end) */
.bonus-section {
background:#000;
color:#fff;
padding:5rem 1.5rem;
text-align:center;
}
.bonus-subheading {
color:#9dff00;
text-transform:uppercase;
letter-spacing:.1em;
font-weight:600;
margin-bottom:.5rem;
}
.bonus-heading {
font-size:2rem;
font-weight:700;
margin-bottom:3rem;
}
.bonus-grid {
display:flex;
flex-direction:column;
gap:3rem;
max-width:1100px;
margin:0 auto;
}
.bonus-item {
display:flex;
align-items:center;
justify-content:space-between;
gap:2rem;
flex-wrap:wrap;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
border-radius:16px;
padding:2rem;
transition:all 0.3s ease;
}
.bonus-item:hover {
transform:translateY(-5px);
box-shadow:0 0 25px rgba(157,255,0,0.1);
}
.bonus-text { flex:1 1 50%; text-align:left; }
.bonus-text h4 { color:#9dff00; font-size:1.4rem; font-weight:700; margin-bottom:1rem; }
.bonus-text p, .bonus-text ul li { color:#ccc; line-height:1.6; font-size:1rem; }
.bonus-text ul { list-style:disc; margin-left:1.5rem; margin-bottom:1rem; }
.bonus-price { display:inline-block; margin-top:1rem; color:#6fff00; font-weight:700; }
.bonus-image { flex:1 1 45%; }
.bonus-image img { width:100%; border-radius:12px; object-fit:cover; }
.cta-container { margin-top:4rem; }
.ai-enroll-btn-get-started {
background:#9dff00;
color:#000;
padding:1rem 2rem;
font-weight:700;
border-radius:8px;
text-decoration:none;
transition:all 0.3s;
}
.ai-enroll-btn-get-started:hover { transform:scale(1.05); box-shadow:0 0 25px rgba(157,255,0,0.3); }
@media (max-width:768px){
.bonus-item{flex-direction:column;}
.bonus-text{text-align:center;}
}
/* video modal */
/* --- Vault Reel Cards --- */
.vault-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1024px){.vault-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.vault-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.vault-grid{grid-template-columns:1fr}}
.vcard{
position:relative; border-radius:16px; overflow:hidden; background:#111;
border:1px solid rgba(255,255,255,.08); box-shadow:0 12px 24px rgba(0,0,0,.25);
cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
aspect-ratio:9/16; isolation:isolate;
}
.vcard:hover{transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.35); border-color:rgba(157,255,0,.35)}
.vcard video{
width:100%; height:100%; object-fit:cover; display:block; background:#000;
}
.vcard .vcorner{
position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:50%;
display:grid; place-items:center; background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.25); z-index:2;
}
.vcard .vcorner:before{
content:""; display:block; border-style:solid; border-width:8px 0 8px 12px; border-color:transparent transparent transparent #fff; margin-left:3px;
}
.vcard .vmeta{
position:absolute; left:0; right:0; bottom:0; padding:14px 16px; z-index:2;
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 60%, rgba(0,0,0,.95) 100%);
color:#fff;
}
.vmeta h5{margin:0 0 4px;font-size:1rem;line-height:1.2}
.vmeta p{margin:0;color:#cfcfcf;font-size:.9rem}
/* --- Vault Modal --- */
.vmodal{position:fixed; inset:0; display:none; z-index:1000; background:rgba(0,0,0,.8)}
.vmodal.is-open{display:grid; place-items:center}
.vmodal__box{
width:min(920px,92vw); background:#0b0b0b; color:#fff; border-radius:14px; overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.vmodal__media{position:relative; background:#000}
.vmodal__media video{width:100%; height:auto; display:block; max-height:78vh}
.vmodal__close{
position:absolute; top:12px; right:12px; width:40px; height:40px; display:grid; place-items:center;
background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25); border-radius:50%; cursor:pointer; z-index:3;
}
.vmodal__close:before{content:"✕"; font-size:18px; color:#fff}
.vmodal__footer{
display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; background:#0f0f0f; border-top:1px solid rgba(255,255,255,.08)
}
.vmodal__title{font-weight:700}
.vmodal__cta-note{color:#cfcfcf; font-size:.9rem}
/* reviews */
/* ====== PV REVIEWS (scoped) ====== */
.pv-reviews{background:#000;padding:24px 16px 28px;color:#fff}
.pv-rev-wrap{max-width:1200px;margin:0 auto}
.pv-rev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.pv-rev-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.pv-rev-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pv-rev-grid{grid-template-columns:1fr}}
.pv-rev-card{
position:relative;background:#1d1d1f;border:1px solid rgba(255,255,255,.12);
border-radius:18px;padding:18px 18px 16px;box-shadow:0 20px 40px rgba(0,0,0,.25)
}
.pv-rev-card--highlight{
border-color:#f6b31a;
box-shadow:0 0 0 1px rgba(246,179,26,.35), 0 28px 60px rgba(0,0,0,.35);
}
.pv-rev-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pv-rev-stars{display:flex;gap:6px}
.pv-rev-stars svg{width:18px;height:18px;display:block}
.pv-rev-stars path{fill:#ffbf1a;filter:drop-shadow(0 0 6px rgba(255,191,26,.35))}
.pv-rev-score{font-size:1.25rem;font-weight:800;color:#ffbf1a}
.pv-rev-quote{color:#e2e2e2;font-size:1rem;line-height:1.55;margin:0 0 14px}
.pv-rev-user{display:flex;align-items:center;gap:10px}
.pv-rev-avatar{position:relative;width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid #2b2b2b;flex:0 0 46px}
.pv-rev-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pv-rev-flag{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;outline:2px solid #1d1d1f;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.pv-rev-name{display:flex;flex-direction:column}
.pv-rev-name strong{font-weight:800}
.pv-rev-name small{color:#bdbdbd;font-size:.92rem}
/* Compact, image-free look */
.pv-reviews{background:#000;padding:24px 16px 28px}
.pv-rev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.pv-rev-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.pv-rev-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pv-rev-grid{grid-template-columns:1fr}}
.pv-rev-card{
background:#1d1d20;border:1px solid rgba(255,255,255,.12);border-radius:18px;
padding:18px;box-shadow:0 18px 36px rgba(0,0,0,.28)
}
.pv-rev-card--highlight{
border-color:#f6b31a; box-shadow:0 0 0 1px rgba(246,179,26,.35), 0 28px 60px rgba(0,0,0,.35)
}
.pv-rev-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pv-rev-stars{display:flex;gap:6px}
.pv-rev-stars svg{width:18px;height:18px}
.pv-rev-stars path{fill:#ffbf1a;filter:drop-shadow(0 0 6px rgba(255,191,26,.35))}
.pv-rev-score{font-weight:800;color:#ffbf1a;font-size:1.25rem}
.pv-rev-quote{
color:#e6e6e7;font-size:1.02rem;line-height:1.6;margin:0 0 14px;
text-align:left
}
.pv-rev-quote strong{color:#fff;font-weight:800}
.pv-rev-meta{display:flex;flex-direction:column;gap:2px}
.pv-rev-meta strong{font-weight:800}
.pv-rev-meta span{color:#bdbdbd;font-size:.92rem}
/* Remove any legacy avatar/flag spacing if previous CSS exists */
.pv-rev-user,.pv-rev-avatar,.pv-rev-flag,.pv-rev-name{display:none !important}
/* what's inside */
/* ===== 5-PILLAR STACK (scoped) ===== */
.pv-stack{background:#0b0b0c;color:#fff;position:relative;overflow:hidden;padding:56px 16px}
.pv-stack:before{
content:""; position:absolute; inset:-200% -200% 0 -200%;
background:
radial-gradient(600px 300px at 85% 10%, rgba(157,255,0,.08), transparent 60%),
radial-gradient(400px 200px at 60% 5%, rgba(255,105,180,.07), transparent 60%),
radial-gradient(500px 260px at 20% 15%, rgba(255,191,26,.08), transparent 60%),
repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 20px);
opacity:.4; pointer-events:none;
}
.pv-stack-wrap{max-width:1180px;margin:0 auto;position:relative;z-index:1}
/* Header */
.pv-badge{
display:inline-flex;align-items:center;gap:8px;background:#1a1a1d;border:1px solid rgba(255,255,255,.1);
color:#ffbf1a;font-weight:700;border-radius:22px;padding:6px 14px;font-size:.9rem
}
.pv-badge svg{width:16px;height:16px}
.pv-hero{font-size:clamp(2rem,5.2vw,3.8rem);line-height:1.05;margin:.75rem 0 .35rem;font-weight:900}
.pv-hero span{background:linear-gradient(90deg,#ffbf1a 0%,#ff7ab6 45%,#ff6a00 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pv-sub{color:#bfc5cf;max-width:820px}
/* Stats */
.pv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 22px;max-width:840px}
.pv-stat{background:#121214;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.pv-stat-num{font-weight:900;font-size:1.6rem;margin-bottom:6px}
.pv-stat-num--amber{color:#ffbf1a}
.pv-stat-num--pink{color:#ff7ab6}
.pv-stat-num--green{color:#41ffb1}
.pv-stat-label{color:#a8adb8;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}
/* Tabs */
.pv-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.pv-tab{
background:#151518;border:1px solid rgba(255,255,255,.1);color:#eaeaf0;border-radius:14px;padding:10px 12px;
display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;transition:.2s
}
.pv-tab:hover{transform:translateY(-1px)}
.pv-tab.is-active{border-color:#ffbf1a;box-shadow:0 0 0 1px rgba(255,191,26,.35)}
.pv-tab-badge{
width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
background:#2a2a2f;color:#fff;font-size:.85rem;font-weight:800
}
/* Panels */
.pv-panels{margin-top:10px}
.pv-panel{
display:none;grid-template-columns:1.2fr .9fr;gap:28px;align-items:center;
background:#0f0f11;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;
box-shadow:0 16px 40px rgba(0,0,0,.35)
}
.pv-panel.is-active{display:grid;animation:pvFade .25s ease}
@keyframes pvFade{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.pv-panel-left h3{margin:.25rem 0 6px;font-weight:900;font-size:1.35rem}
.pv-lead{color:#e7e9ee}
.pv-bullets{margin:10px 0 12px;padding-left:1.2rem}
.pv-bullets li{margin:.2rem 0}
.pv-meta{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 12px}
.pv-value{background:#19191c;border:1px solid rgba(255,255,255,.08);padding:6px 10px;border-radius:10px;font-weight:800;color:#ffbf1a}
.pv-tip{color:#aeb4bf}
.pv-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pv-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:10px 14px;font-weight:900;text-decoration:none}
.pv-btn--primary{background:#9dff00;color:#000;box-shadow:0 8px 24px rgba(157,255,0,.25)}
.pv-btn--primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(157,255,0,.35)}
/* Right visuals (placeholder shapes you can swap later) */
.pv-preview{width:100%;min-height:220px;background:#0c0c0e;border-radius:14px;border:1px dashed rgba(255,255,255,.08);display:grid;place-items:center;color:#777}
.pv-preview--grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:10px}
.pv-preview--grid div{background:linear-gradient(180deg,#1b1b1f,#0e0e12);border:1px solid rgba(255,255,255,.06);border-radius:12px;aspect-ratio:9/16;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.pv-preview--chat{padding:14px;align-content:start;gap:10px}
.pv-bubble{max-width:90%;border-radius:12px;padding:10px 12px}
.pv-bubble--you{background:#17171b;border:1px solid rgba(255,255,255,.06)}
.pv-bubble--ai{background:#111a14;border:1px solid rgba(65,255,177,.25)}
.pv-preview--calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:12px}
.pv-preview--calendar .pv-cell{border-radius:10px;background:#141418;border:1px solid rgba(255,255,255,.06);height:44px;display:grid;place-items:center;color:#9aa0ac}
.pv-preview--calendar .pv-cell--active{background:#1f1f23;color:#fff;border-color:rgba(255,191,26,.35)}
.pv-preview--sites{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px}
.pv-sitecard{height:110px;border-radius:12px;background:linear-gradient(135deg,#1b1b1f,#101014);border:1px solid rgba(255,255,255,.06);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.pv-preview--prompts{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;color:#e7e9ee}
/* Bonus */
.pv-bonus{margin:16px 0 0;background:#141416;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;color:#cfd3dc}
/* Responsive */
@media (max-width:980px){
.pv-panel{grid-template-columns:1fr;gap:16px}
.pv-stats{max-width:none}
}
/* ================================
PV STACK Tidy / Indentation Overrides
(No HTML changes required)
================================ */
/* Overall rhythm & spacing */
.pv-stack{padding:60px 18px}
.pv-stack-wrap{max-width:1200px}
/* Headline + subhead */
.pv-hero{margin:.5rem 0}
.pv-sub{
max-width:860px;
font-size:1.05rem;
line-height:1.7;
}
/* Stats breathe a bit more and align baseline */
.pv-stats{gap:18px;margin:26px 0 18px}
.pv-stat{padding:16px}
.pv-stat-num{font-size:1.5rem}
/* Pill tabs: better padding, true pills, clearer active ring */
.pv-tabs{gap:12px;margin:20px 0}
.pv-tab{
padding:12px 16px;
border-radius:999px;
background:#17171a;
border:1px solid rgba(255,255,255,.10);
box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
font-weight:800;
}
.pv-tab-badge{
width:24px;height:24px;font-size:.9rem;background:#222228
}
.pv-tab.is-active{
border-color:#ffbf1a;
box-shadow:0 0 0 2px rgba(255,191,26,.28), 0 10px 24px rgba(0,0,0,.35);
}
/* Panel layout: wider gutters, true left alignment, readable line length */
.pv-panels{margin-top:14px}
.pv-panel{
grid-template-columns:1.15fr .95fr;
padding:26px 24px;
gap:32px;
}
.pv-panel-left{
display:flex; flex-direction:column;
gap:14px; /* consistent vertical rhythm */
text-align:left; /* kill center alignment feel */
max-width:780px; /* ideal measure for readability */
}
.pv-panel-left h3{
font-size:1.5rem;
line-height:1.2;
margin:0 0 2px;
}
/* Lead paragraph & bullets: clean indentation and spacing */
.pv-lead{
font-size:1.06rem;
line-height:1.75;
color:#e9eaf0;
}
.pv-bullets{
list-style:none;
padding:0; margin:4px 0 6px 0;
}
.pv-bullets li{
display:flex; gap:10px; align-items:flex-start;
margin:.38rem 0;
line-height:1.6;
}
.pv-bullets li::before{
content:""; flex:0 0 9px; height:9px; margin-top:.45rem;
border-radius:50%;
background: radial-gradient(circle at 40% 40%, #ffbf1a 0 50%, rgba(255,191,26,.25) 50% 100%);
box-shadow:0 0 0 2px rgba(255,191,26,.15);
}
/* Value chip + tip: tuck neatly under copy */
.pv-meta{gap:10px;margin:0 0 6px}
.pv-value{
padding:7px 12px;
border-radius:10px;
font-size:.95rem;
}
.pv-tip{font-size:.95rem; color:#aeb4bf}
/* CTA row: aligned baseline, tidy spacing; button heights match */
.pv-cta{gap:12px}
.pv-btn{padding:11px 16px}
.pv-btn--primary{box-shadow:0 10px 26px rgba(157,255,0,.28)}
.pv-cta form{display:inline-block; line-height:0} /* let Razorpay button sit tight */
/* Right preview: give it presence but softer border; keep min-height */
.pv-panel-right .pv-preview{
min-height:260px;
border:1px solid rgba(255,255,255,.06);
background:linear-gradient(180deg,#0e0e12,#0b0b0d);
}
.pv-preview--grid{gap:12px;padding:12px}
.pv-preview--grid div{
border-radius:14px;
border:1px solid rgba(255,255,255,.06);
background:linear-gradient(180deg,#1a1a1f,#101015);
}
/* Bonus bar: slightly smaller, cleaner */
.pv-bonus{
margin:18px 0 0;
padding:12px 14px;
font-size:1rem;
border-radius:12px;
}
/* Responsive polish */
@media (max-width:1080px){
.pv-panel{grid-template-columns:1fr;gap:18px}
.pv-panel-right .pv-preview{min-height:200px}
}
@media (max-width:640px){
.pv-tab{padding:10px 12px;font-size:.98rem}
.pv-panel{padding:20px}
.pv-lead{font-size:1.01rem}
}
/* ============================
UPPER HEADER REFINEMENTS
============================ */
/* Center the badge + headline + subhead and tighten rhythm */
.pv-stack-head{max-width:980px;margin:0 auto 10px;text-align:center}
.pv-badge{margin:0 auto 12px}
.pv-hero{margin:6px 0 10px;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.05}
.pv-sub{
max-width:900px;margin:0 auto 18px;
font-size:1.06rem;line-height:1.75;color:#cfd4dc
}
/* Stats: equal width, same height, centered row */
.pv-stats{
display:grid;grid-template-columns:repeat(3, minmax(220px, 1fr));
gap:18px;max-width:980px;margin:18px auto 22px
}
.pv-stat{padding:20px 18px;border-radius:20px}
.pv-stat-num{font-size:1.7rem;margin-bottom:6px}
.pv-stat-label{letter-spacing:.08em}
/* ============================
TABS IN ONE LINE (DESKTOP)
============================ */
/* Desktop and larger: keep them on one line and center them */
@media (min-width: 1024px){
.pv-tabs{
display:flex;flex-wrap:nowrap;justify-content:center;gap:14px;
max-width:1200px;margin:20px auto 12px;overflow:visible
}
.pv-tab{
white-space:nowrap; /* don't break */
padding:12px 16px; /* slightly slimmer so all 5 fit */
font-size:1rem;border-radius:9999px
}
.pv-tab-badge{width:24px;height:24px;font-size:.92rem}
}
/* Tablet: allow wrap gracefully if needed */
@media (min-width: 720px) and (max-width: 1023.98px){
.pv-tabs{justify-content:center;gap:10px}
.pv-tab{padding:10px 14px;font-size:.98rem}
}
/* Small screens: normal wrapping */
@media (max-width: 719.98px){
.pv-tabs{gap:8px}
.pv-tab{padding:9px 12px;font-size:.95rem}
}
/* what after buy section */
/* ================================
TRANSFORMATION SECTION – SAFE, RESPONSIVE
(Drop-in replacement; fully scoped)
================================ */
/* 1) Base + containment: prevent any horizontal overflow */
.pv-contrast,
.pv-contrast * { box-sizing: border-box; }
.pv-contrast{
background:#0b0b0c;
color:#fff;
padding:64px 16px 56px;
position:relative;
overflow:hidden; /* kill right/left overflow from shadows/pseudos */
width:100%;
}
.pv-contrast::before{
content:"";
position:absolute;
inset:0; /* no negative inset → no scrollbars */
pointer-events:none;
background:
radial-gradient(520px 260px at 85% 12%, rgba(157,255,0,.07), transparent 60%),
radial-gradient(420px 220px at 25% 10%, rgba(255,122,182,.07), transparent 60%);
opacity:.45;
}
.pv-contrast-wrap{
width:100%;
max-width:1180px; /* safe container */
margin:0 auto;
position:relative;
z-index:1;
}
/* 2) Head area (centered, fluid sizes) */
.pv-contrast-head{
text-align:center;
max-width:900px;
margin:0 auto 26px;
}
.pv-contrast-kicker{
display:inline-block;
margin-bottom:10px;
padding:6px 12px;
border-radius:999px;
color:#ffbf1a;
background:#1a1a1d;
border:1px solid rgba(255,255,255,.1);
font-weight:700;
font-size:.9rem;
}
.pv-contrast-title{
font-size:clamp(1.9rem, 5.2vw, 3.2rem);
line-height:1.1;
margin:6px 0 10px;
font-weight:900;
}
.pv-contrast-title span{
background:linear-gradient(90deg,#ffbf1a 0%,#ff7ab6 50%,#ff6a00 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.pv-contrast-sub{
color:#cfd4dc;
font-size:clamp(1rem, 2.2vw, 1.06rem);
line-height:1.7;
margin:0 auto;
}
/* 3) Grid: 12-column system that never exceeds container width */
.pv-contrast-grid{
display:grid;
grid-template-columns:repeat(12, minmax(0,1fr));
gap:24px;
margin:28px 0 20px;
width:100%;
}
.pv-contrast-card{
grid-column:1 / -1; /* default: full width (mobile first) */
background:#141416;
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
box-shadow:0 18px 40px rgba(0,0,0,.35);
padding:24px 22px;
width:100%; /* avoid intrinsic overflow */
}
.pv-contrast-card--before{
box-shadow:0 24px 50px rgba(255,80,80,.06), 0 18px 40px rgba(0,0,0,.35);
}
.pv-contrast-card--after{
box-shadow:0 24px 50px rgba(65,255,177,.07), 0 18px 40px rgba(0,0,0,.35);
}
/* Tablet+ : two columns */
@media (min-width: 820px){
.pv-contrast-card{ grid-column: span 6; }
}
/* 4) Card headings + lists */
.pv-contrast-h3{
font-weight:900;
margin:0 0 12px;
font-size:clamp(1.25rem, 2.6vw, 1.55rem);
}
.pv-contrast-list{
margin:0;
padding:0;
list-style:none;
display:grid;
grid-template-columns:1fr; /* single column by default */
gap:12px 22px;
}
.pv-contrast-list li{
display:flex;
gap:12px;
align-items:flex-start;
color:#e6e8ee;
line-height:1.6;
word-wrap:break-word;
}
.pv-contrast-list .ico{
display:inline-block;
width:22px; height:22px; flex:0 0 22px;
border-radius:50%;
margin-top:.15rem;
}
.pv-contrast-list--bad .ico{
background:radial-gradient(circle at 35% 35%, #ff6565 0 45%, #7a1f1f 46% 100%);
box-shadow:0 0 0 2px rgba(255,101,101,.15);
}
.pv-contrast-list--good .ico{
background:radial-gradient(circle at 35% 35%, #41ffb1 0 45%, #145a46 46% 100%);
box-shadow:0 0 0 2px rgba(65,255,177,.18);
}
/* OPTIONAL two-column benefits (only when space allows) */
@media (min-width: 1024px){
.pv-contrast-list--cols{ grid-template-columns:1fr 1fr; }
}
/* 5) CTA band (always centered, no overflow) */
.pv-contrast-cta{
text-align:center;
margin-top:28px;
width:100%;
}
.pv-cta-title{
font-size:clamp(1.5rem, 3.6vw, 2.1rem);
margin:0 0 6px;
font-weight:900;
}
.pv-cta-title span{ color:#ff7ab6; }
.pv-cta-sub{
color:#b9c0cb;
margin:0 0 14px;
font-size:clamp(1rem, 2vw, 1.06rem);
}
.pv-cta-actions{
display:flex;
gap:12px;
justify-content:center;
align-items:center;
flex-wrap:wrap;
margin:8px 0 10px;
}
.pv-cta-btn{
display:inline-flex;
gap:10px;
align-items:center;
justify-content:center;
padding:14px 20px;
border-radius:16px;
font-weight:900;
text-decoration:none;
color:#000;
background:linear-gradient(90deg,#ffb34a 0%, #ff7ab6 100%);
box-shadow:0 14px 34px rgba(255,122,182,.25);
white-space:nowrap;
max-width:100%;
}
.pv-cta-btn:hover{ transform:translateY(-1px); box-shadow:0 18px 36px rgba(255,122,182,.35); }
.pv-cta-icon{ font-size:1.1rem; }
.pv-cta-currency{ opacity:.9; }
/* Make Razorpay button sit neatly next to CTA */
.pv-cta-actions form{ display:inline-block; line-height:0; }
/* Trust row */
.pv-cta-trust{
display:flex;
gap:18px;
justify-content:center;
flex-wrap:wrap;
margin:10px 0 0;
padding:0;
list-style:none;
color:#bfc6d0;
}
.pv-cta-trust li{ display:flex; gap:8px; align-items:center; }
.pv-cta-trust .tick{
width:16px; height:16px; border-radius:50%;
background:conic-gradient(#41ffb1, #1cbf83);
-webkit-mask:url('data:image/svg+xml;utf8,') center/100% 100% no-repeat;
mask:url('data:image/svg+xml;utf8,') center/100% 100% no-repeat;
}
/* 6) Safety: ensure media/embeds inside this section never overflow */
.pv-contrast img,
.pv-contrast video,
.pv-contrast iframe{ max-width:100%; height:auto; display:block; }
/* Balanced, responsive 2-col list that never cramps */
.pv-contrast-list--cols{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); /* 2 cols only if space >= 380px each */
gap:14px 24px;
}
@media (max-width: 860px){
.pv-contrast-list--cols{ grid-template-columns:1fr; } /* single column on small screens */
}
/* Tighter, cleaner text flow */
.pv-contrast-list--tight li{
margin:0; /* remove extra margins from base list */
overflow-wrap: anywhere; /* prevent awkward long-word overflow */
hyphens: auto;
line-height:1.6;
}
/* Icon alignment + visual balance */
.pv-contrast-list--cols .ico{
margin-top:.38em; /* align dot with first line of text */
box-shadow:0 2px 0 rgba(0,0,0,.25), 0 0 0 2px rgba(65,255,177,.18) inset !important;
}
/* Make sure the AFTER card never centers text */
.pv-contrast-card--after{ text-align:left; }
/* Bigger AFTER card + single-column, tidy bullets */
.pv-contrast-card--after{
padding:32px 28px; /* larger box */
}
/* On wide screens, give AFTER card more width than BEFORE */
@media (min-width: 1024px){
.pv-contrast-card--before{ grid-column: 1 / span 5; }
.pv-contrast-card--after{ grid-column: 6 / span 7; }
}
/* Stack: one item per line, bigger hit area, consistent icon alignment */
.pv-list-stack{
display:grid !important;
grid-template-columns: 1fr; /* always single column */
gap:12px; /* even spacing */
}
.pv-list-stack li{
margin:0; line-height:1.65;
display:flex; align-items:flex-start; gap:12px;
word-break:break-word; overflow-wrap:anywhere;
}
.pv-list-stack .ico{
width:22px;height:22px;flex:0 0 22px;border-radius:50%;
margin-top:.35em; /* aligns dot with first line */
background:radial-gradient(circle at 35% 35%, #41ffb1 0 45%, #145a46 46% 100%);
box-shadow:0 0 0 2px rgba(65,255,177,.18);
}
/* Optional: slightly larger title spacing inside the AFTER card */
.pv-contrast-card--after .pv-contrast-h3{ margin-bottom:14px; }
/* demo videos new sec */
/* ============ VAULT TABS (scoped) ============ */
.pv-vaulttabs,*[class^="pv-vaulttabs"]{box-sizing:border-box}
.pv-vaulttabs{background:#000;padding:40px 16px;color:#fff;position:relative}
.pv-vaulttabs__head{max-width:1180px;margin:0 auto 18px;text-align:center}
.pv-vaulttabs__kicker{display:inline-block;padding:6px 12px;border-radius:999px;background:#151518;border:1px solid rgba(255,255,255,.1);color:#ffbf1a;font-weight:800;font-size:.9rem;margin-bottom:10px}
.pv-vaulttabs__title{font-size:clamp(1.8rem,4.5vw,2.6rem);margin:6px 0 6px;font-weight:900}
.pv-vaulttabs__title span{background:linear-gradient(90deg,#ffbf1a,#ff7ab6,#ff6a00);-webkit-background-clip:text;background-clip:text;color:transparent}
.pv-vaulttabs__sub{color:#cfd4dc;max-width:900px;margin:0 auto 8px;line-height:1.7}
.pv-vaulttabs__tabs{max-width:1180px;margin:0 auto 14px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pv-vaulttabs__tab{
display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;
background:#151518;border:1px solid rgba(255,255,255,.1);color:#e9ebf2;font-weight:800;cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; white-space:nowrap;
}
.pv-vaulttabs__dot{width:8px;height:8px;border-radius:50%;background:#9dff00;box-shadow:0 0 0 3px rgba(157,255,0,.18) inset}
.pv-vaulttabs__tab:hover{transform:translateY(-1px)}
.pv-vaulttabs__tab.is-active{border-color:#ffbf1a;box-shadow:0 0 0 2px rgba(255,191,26,.28)}
.pv-vaulttabs__panels{max-width:1180px;margin:0 auto}
.pv-vaulttabs__panel{display:none}
.pv-vaulttabs__panel.is-active{display:block;animation:pvVaultFade .22s ease}
@keyframes pvVaultFade{from{opacity:.7;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
.pv-vaulttabs__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1024px){.pv-vaulttabs__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.pv-vaulttabs__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.pv-vaulttabs__grid{grid-template-columns:1fr}}
.pv-vaulttabs__card{position:relative;background:#0c0c0f;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.pv-vaulttabs__video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;filter:brightness(.96);transition:transform .2s ease}
.pv-vaulttabs__card:hover .pv-vaulttabs__video{transform:scale(1.01)}
.pv-vaulttabs__play{
position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.3);
background:rgba(0,0,0,.35);backdrop-filter:saturate(140%) blur(4px);color:#fff;font-weight:900;display:grid;place-items:center;cursor:pointer
}
/* Modal */
.pv-vaulttabs__modal[hidden]{display:none}
.pv-vaulttabs__modal{position:fixed;inset:0;z-index:9990}
.pv-vaulttabs__modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.pv-vaulttabs__modal-dialog{
position:absolute;inset:auto 0 0 0;margin:auto;top:50%;transform:translateY(-50%);
width:min(900px,92vw);background:#0b0b0c;border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);padding:12px
}
.pv-vaulttabs__modal-video{width:100%;display:block;max-height:78vh;background:#000}
.pv-vaulttabs__modal-close{position:absolute;top:6px;right:6px;width:36px;height:36px;border-radius:999px;background:#151518;color:#fff;border:1px solid rgba(255,255,255,.12);cursor:pointer}
/* --- PV Vault Modal: hard-center and override old positioning --- */
.pv-vaulttabs__modal[hidden]{display:none}
.pv-vaulttabs__modal{
position:fixed !important;
inset:0 !important;
z-index:99999 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:16px; /* breathing room on small screens */
background:rgba(0,0,0,.72); /* use the layer itself as the backdrop */
}
.pv-vaulttabs__modal-backdrop{ display:none !important; } /* not needed now */
.pv-vaulttabs__modal-dialog{
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
margin:0 !important;
transform:none !important;
/* Size for vertical reels; keeps headroom for CTA */
width:min(520px, 92vw);
max-height:90vh;
background:#0b0b0c;
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
box-shadow:0 30px 80px rgba(0,0,0,.6);
padding:14px;
display:flex;
flex-direction:column;
gap:12px;
}
.pv-vaulttabs__modal-video{
width:100%;
height:auto;
max-height:74vh; /* leaves room for the CTA row */
background:#000;
display:block;
object-fit:contain; /* keep full vertical video visible */
}
.pv-vaulttabs__modal-close{
position:absolute; top:8px; right:8px;
width:36px; height:36px; border-radius:999px;
background:#151518; color:#fff;
border:1px solid rgba(255,255,255,.12);
cursor:pointer;
}
/* CTA row inside modal */
.pv-vaulttabs__modal-actions{
display:flex; flex-wrap:wrap; gap:10px;
justify-content:center; align-items:center;
padding-top:2px;
}
.pv-vaulttabs__cta-btn{
display:inline-flex; align-items:center; justify-content:center;
padding:10px 16px; border-radius:12px; font-weight:900; text-decoration:none;
background:#9dff00; color:#000;
box-shadow:0 10px 26px rgba(157,255,0,.25);
}
.pv-vaulttabs__rzp{ line-height:0; display:inline-block }
/* Make the whole tile obviously clickable */
.pv-vaulttabs__card{ cursor:pointer }
.pv-vaulttabs__video{ cursor:pointer }
.pv-vaulttabs__play{ pointer-events:auto }
/* Modal visibility control never show unless we explicitly open it */
.pv-vaulttabs__modal{ display:none; } /* default: hidden */
.pv-vaulttabs__modal[hidden]{ display:none !important; } /* attribute wins */
.pv-vaulttabs__modal.is-open{ /* shown state */
display:flex !important;
position:fixed !important;
inset:0 !important;
z-index:99999 !important;
align-items:center !important;
justify-content:center !important;
padding:16px;
background:rgba(0,0,0,.72);
}
/* keep the rest of your modal styles as-is */
/* Close button must be clickable & above everything */
.pv-vaulttabs__modal-close{
z-index: 2;
pointer-events: auto;
}
.pv-vaulttabs__modal-dialog{
position: relative;
}
/* --- Force modal to be hidden by default, only shown with .is-open --- */
.pv-vaulttabs__modal{ display:none; }
.pv-vaulttabs__modal[hidden]{ display:none !important; }
.pv-vaulttabs__modal.is-open{
display:flex !important;
position:fixed !important;
inset:0 !important;
z-index:999999 !important; /* above everything */
align-items:center !important;
justify-content:center !important;
padding:16px;
background:rgba(0,0,0,.72);
}
/* Dialog box */
.pv-vaulttabs__modal-dialog{
position:relative !important;
transform:none !important;
width:min(520px, 92vw);
max-height:90vh;
background:#0b0b0c;
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
box-shadow:0 30px 80px rgba(0,0,0,.6);
padding:14px;
display:flex; flex-direction:column; gap:12px;
z-index:1; /* new stacking context */
}
/* Close button must sit on top and be clickable */
.pv-vaulttabs__modal-close{
position:absolute; top:8px; right:8px;
width:36px; height:36px; border-radius:999px;
background:#151518; color:#fff;
border:1px solid rgba(255,255,255,.12);
cursor:pointer; z-index:2;
pointer-events:auto; /* in case a reset disabled it */
}
/* Video fits with CTA space */
.pv-vaulttabs__modal-video{
width:100%; height:auto; max-height:74vh; object-fit:contain; background:#000; display:block;
}
/* CTA row */
.pv-vaulttabs__modal-actions{
display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; padding-top:2px;
}
.pv-vaulttabs__cta-btn{
display:inline-flex; align-items:center; justify-content:center;
padding:10px 16px; border-radius:12px; font-weight:900; text-decoration:none;
background:#9dff00; color:#000; box-shadow:0 10px 26px rgba(157,255,0,.25);
}
.pv-vaulttabs__rzp{ line-height:0; display:inline-block; }
/* Make tiles/videos open modal by click */
.pv-vaulttabs__card{ cursor:pointer }
.pv-vaulttabs__video{ cursor:pointer }
/* Vault Tabs clickability + visibility guards */
#pv-vaulttabs .pv-vaulttabs__tab { pointer-events:auto; }
#pv-vaulttabs .pv-vaulttabs__panel { display:none; }
#pv-vaulttabs .pv-vaulttabs__panel.is-active { display:block; }
#pv-vaulttabs .pv-vaulttabs__tab.is-active {
border-color:#ffbf1a;
box-shadow:0 0 0 2px rgba(255,191,26,.28);
}
/* Vault Tabs: visibility/clickability guards */
#pv-vaulttabs .pv-vaulttabs__panel{ display:none; }
#pv-vaulttabs .pv-vaulttabs__panel.is-active{ display:block; }
#pv-vaulttabs .pv-vaulttabs__tab{ pointer-events:auto; }
#pv-vaulttabs .pv-vaulttabs__tab.is-active{
border-color:#ffbf1a;
box-shadow:0 0 0 2px rgba(255,191,26,.28);
}
/* Modal: default hidden; only show with .is-open */
#pv-vaulttabs .pv-vaulttabs__modal{ display:none; }
#pv-vaulttabs .pv-vaulttabs__modal[hidden]{ display:none !important; }
#pv-vaulttabs .pv-vaulttabs__modal.is-open{
display:flex !important; position:fixed !important; inset:0 !important;
z-index:99999 !important; align-items:center !important; justify-content:center !important;
padding:16px; background:rgba(0,0,0,.72);
}
/* Ensure dialog & close button are above and clickable */
#pv-vaulttabs .pv-vaulttabs__modal-dialog{ position:relative; z-index:1; }
#pv-vaulttabs .pv-vaulttabs__modal-close{ z-index:2; pointer-events:auto; }
/* =========================
WHAT'S INSIDE STYLES
(namespaced to .pv-inside to avoid conflicts)
========================= */
.pv-inside{
--bg:#0b0b0c;
--card:#121214;
--muted:#b8c0cc;
--ring: #9dff00;
--accent: linear-gradient(135deg,#ff8bd4 0%, #ffb86b 50%, #9dff00 100%);
background: var(--bg);
color:#fff;
padding: clamp(48px,6vw,90px) 16px;
}
.pv-inside__intro{
text-align:center;
max-width: 920px;
margin: 0 auto clamp(28px,4vw,44px);
}
.pv-inside__title{
font-size: clamp(28px,4.4vw,46px);
line-height:1.15;
margin:0 0 10px;
letter-spacing:.2px;
}
.pv-inside__title span{
background: var(--accent);
-webkit-background-clip:text;
background-clip:text;
color: transparent;
}
.pv-inside__tagline{
color:var(--muted);
font-size: clamp(15px,1.5vw,18px);
margin:0;
}
/* GRID 3 on first row, 2 centered on second */
.pv-inside__grid{
max-width: 1200px;
margin: 24px auto 12px;
display:grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(14px,1.6vw,20px);
}
.pv-inside__card{
background: radial-gradient(120% 120% at 0% 0%, rgba(157,255,0,.06), transparent 60%),
var(--card);
border:1px solid rgba(255,255,255,.06);
border-radius: 18px;
padding: clamp(16px,2.2vw,22px);
box-shadow: 0 10px 28px rgba(0,0,0,.35);
transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
will-change: transform;
}
.pv-inside__card:hover{
transform: translateY(-6px) rotate(-.25deg);
border-color: rgba(157,255,0,.35);
box-shadow: 0 18px 42px rgba(0,0,0,.55);
}
.pv-inside__icon{
width:44px;height:44px;border-radius:12px;
display:grid;place-items:center;
background: rgba(157,255,0,.12);
border:1px solid rgba(157,255,0,.25);
margin-bottom: 14px;
font-size: 22px;
}
.pv-inside__card h3{
margin:0 0 6px;
font-size: clamp(18px,2.2vw,22px);
letter-spacing:.2px;
}
.pv-inside__desc{
margin:0 0 12px;
color: var(--muted);
font-size: clamp(14px,1.5vw,16px);
}
.pv-inside__bullets{
margin:0; padding-left: 18px;
display:grid; gap: 6px;
color:#dfe6f3;
font-size: clamp(14px,1.5vw,16px);
}
.pv-inside__bullets li{ list-style: square; }
/* Column placement (desktop) */
.pv-inside__card{ grid-column: span 4; }
.pv-inside__grid > .pv-inside__card:nth-child(4){ grid-column: 3 / span 4; }
.pv-inside__grid > .pv-inside__card:nth-child(5){ grid-column: 7 / span 4; }
/* Tablet: 2 columns */
@media (max-width: 1024px){
.pv-inside__grid{ grid-template-columns: repeat(8,1fr); }
.pv-inside__card{ grid-column: span 4; }
.pv-inside__grid > .pv-inside__card:nth-child(4){ grid-column: span 4; }
.pv-inside__grid > .pv-inside__card:nth-child(5){ grid-column: span 4; }
}
/* Mobile: single column */
@media (max-width: 640px){
.pv-inside__grid{ grid-template-columns: repeat(4,1fr); }
.pv-inside__card{ grid-column: 1 / -1; }
}
/* CTA */
.pv-inside__cta{
max-width: 960px;
margin: clamp(22px,4vw,34px) auto 0;
text-align:center;
}
.pv-inside__trust{
color: var(--muted);
font-size: 13.5px;
margin-top: 8px;
}
/* Get Access / Buy button */
.btn-buy{
--g1:#9dff00; /* brand green */
--g2:#6eff00;
--txt:#0b0b0c;
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
border-radius:12px;
background:linear-gradient(90deg,var(--g1),var(--g2));
color:var(--txt);
font-weight:900;
letter-spacing:.2px;
font-size:16px;
line-height:1;
border:0;
cursor:pointer;
box-shadow:0 12px 28px rgba(157,255,0,.25);
transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-buy:hover{ transform:translateY(-1px); filter:saturate(1.05); }
.btn-buy:active{ transform:translateY(0); }
.btn-buy:focus{ outline:none; box-shadow:0 0 0 3px #0b0b0c, 0 0 0 6px rgba(157,255,0,.55); }
.btn-buy[disabled]{ opacity:.6; pointer-events:none; }
/* Tabs: show only the active panel */
/* keep only the active panel visible */
#pv-stack .pv-panel[aria-hidden="true"] { display: none; }
#pv-stack .pv-panel.is-active { display: flex; } /* or block, as needed */
/* Make sure the contact modal sits above EVERYTHING */
#vault-modal{
position: fixed !important;
inset: 0 !important;
z-index: 2147483647 !important; /* max safe z-index */
pointer-events: auto;
}
/* ============= 1) Global mobile type + spacing ============= */
@media (max-width: 480px) {
/* Big hero / section headings */
.pv-hero { font-size: clamp(2rem, 6vw, 2.5rem); line-height: 1.15; }
.pv-panel h3 { font-size: clamp(1.35rem, 5.5vw, 1.85rem); line-height: 1.25; }
/* Paragraphs inside panels */
.pv-panel .pv-lead,
.pv-panel p { font-size: 1rem; line-height: 1.55; }
/* Tighten section paddings a bit */
.pv-stack-wrap { padding-left: 16px; padding-right: 16px; }
}
/* ============= 2) Tabs (pills) ============= */
.pv-tabs{ display:flex; flex-wrap:wrap; gap:.75rem; }
.pv-tab{ white-space:normal; } /* allow wrapping */
@media (max-width: 480px){
.pv-tab{ font-size:.95rem; padding:.7rem .9rem; }
}
/* ============= 3) Panel layout ============= */
.pv-panels { margin-top: 1rem; }
.pv-panel{
display:grid; grid-template-columns: 1fr 420px; gap: 40px;
}
.pv-panel-right{ align-self:start; }
@media (max-width: 1024px){
.pv-panel{ grid-template-columns: 1fr; gap: 24px; }
.pv-panel-right{ order:2; } /* content first, preview second */
}
/* ============= 4) “Benefits / Start Enjoying…” list ============= */
/* The multi-column layout is great on desktop, but it’s breaking words on phones.
Collapse to one column and prevent column breaks inside items. */
.pv-contrast-list--cols{ columns: 2; column-gap: 32px; }
.pv-contrast-list--cols li{ break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 900px){
.pv-contrast-list--cols{ columns: 1 !important; }
}
/* Make sure text never hard-breaks mid-word */
.pv-contrast-list--cols,
.pv-contrast-list--cols li{
word-break: normal;
overflow-wrap: anywhere;
hyphens: manual;
}
/* ============= 5) “What’s Inside” cards ============= */
.whatinside-section .combine-container-small-5 .whatinside_content{
padding: clamp(16px, 3.5vw, 28px);
border-radius: 18px;
}
@media (max-width: 640px){
.whatinside-section .whatinside_content ul{ margin-left: 0; }
.whatinside-section .whatinside_content li{ margin: .4rem 0; }
}
/* ============= 6) Social proof / screenshots ============= */
/* Remove fixed heights so there’s no big black gap above/below images */
.results-img,
.subscriber-img,
.social-proof__card img,
.proof-grid img{
display:block;
width:100%;
height:auto !important; /* kill any fixed height */
max-height: none !important; /* and caps */
object-fit: contain;
}
.social-proof__card{ padding: 12px; border-radius: 16px; }
/* ============= 7) Struggle/Benefits cards (mobile paddings) ============= */
@media (max-width: 480px){
.longlist-card .combine-container-small-5,
.ai-Automation-bottom .container,
.subscriber-update .container{ padding-left: 16px; padding-right: 16px; }
}
/* ============= 8) Safety: disable any leftover multi-column on very small screens ============= */
@media (max-width: 480px){
[style*="columns:"],
[class*="columns"]{
columns: 1 !important;
}
}
/* Left-align content in the "What's Inside" cards on phones */
@media (max-width: 640px){
.whatinside-section .whatinside_content,
.whatinside-section .whatinside_content h2,
.whatinside-section .whatinside_content p,
.whatinside-section .whatinside_content li {
text-align: left !important;
}
}
/* Panels: single column on mobile + full-width preview */
@media (max-width: 768px){
.pv-panel {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.pv-panel-right {
order: 2; /* move preview below text */
width: 100% !important;
}
/* Ensure preview blocks can fill width */
.pv-panel-right .pv-preview {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
/* If any preview variant had a fixed size, neutralize it */
.pv-preview--grid,
.pv-preview--chat,
.pv-preview--sites,
.pv-preview--prompts {
width: 100% !important;
max-width: none !important;
}
}
/* OPTIONAL: hide preview entirely on phones (uncomment to use) */
/*
@media (max-width: 640px){
.pv-panel-right { display: none !important; }
}
*/
/* “Start Enjoying These Benefits” and similar lists */
@media (max-width: 640px){
/* If list items were using grid to split strong + copy, undo it */
.pv-contrast-list--good li,
.pv-contrast-list li {
display: list-item !important; /* revert to standard list flow */
grid-template-columns: none !important;
}
/* Keep the bold phrase inline with the rest of the sentence */
.pv-contrast-list--good li > strong,
.pv-contrast-list li > strong {
display: inline !important;
margin-right: .35rem;
font-weight: 700;
}
/* Icon bullets should not force columns place them inline-start */
.pv-contrast-list--good .ico,
.pv-contrast-list .ico {
float: none;
display: inline-block;
vertical-align: text-top;
margin-right: .5rem;
}
/* If multi-column was applied anywhere, collapse to one */
.pv-contrast-list--cols { columns: 1 !important; }
.pv-contrast-list--cols li { break-inside: avoid; }
}
/* ===== Pricing v2.1 (dark, crisp, responsive) ===== */
.pv-pricing{background:#0b0b0d;padding:48px 0 36px;border-top:1px solid rgba(255,255,255,.06)}
.pvp-wrap{width:min(1200px,92vw);margin:0 auto}
.pvp-head{text-align:center;margin-bottom:22px}
.pvp-badge{display:inline-block;background:rgba(182,255,59,.08);border:1px solid rgba(182,255,59,.35);
color:#cfff5e;padding:6px 12px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.pvp-title{margin:10px 0 6px;color:#e7e9ea;font-size:clamp(26px,3.6vw,40px);font-weight:800}
.pvp-title span{background:linear-gradient(92deg,#b6ff3b,#ff66d1);-webkit-background-clip:text;background-clip:text;color:transparent}
.pvp-sub{color:#a6acb5;margin:0}
.pvp-grid{display:grid;gap:16px;margin-top:18px}
@media (min-width:860px){.pvp-grid{grid-template-columns:repeat(3,1fr)}}
.pvp-card{background:#121216;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px 18px 16px;
color:#e7e9ea;box-shadow:0 10px 30px rgba(0,0,0,.35);position:relative}
.pvp-card--highlight{border-color:#2fe680;box-shadow:0 12px 36px rgba(47,230,128,.15)}
.pvp-ribbon{position:absolute;top:-10px;left:18px;background:#2fe680;color:#0b0b0d;font-weight:800;font-size:12px;
padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.25)}
.pvp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pvp-plan{font-size:18px;font-weight:800}
.pvp-tag{color:#9aa0a6;font-size:13px}
.pvp-price{font-size:20px;color:#cbd3dd;margin:2px 0 10px}
.pvp-price strong{font-size:34px;line-height:1;color:#fff;letter-spacing:.5px}
.pvp-list{margin:0 0 14px 18px;padding:0;color:#c9cfd6;line-height:1.45}
.pvp-list li{margin:6px 0}
.pvp-cta{display:block;width:100%;text-align:center;background:linear-gradient(92deg,#b6ff3b,#d7ff7a);
color:#0b0b0d;border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer}
.pvp-cta:hover{filter:brightness(.96)}
.pvp-included{margin:18px auto 0;background:#0f1114;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;color:#b8c0cc;text-align:center}
.pvp-included strong{color:#e7e9ea}
.pvp-payments{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin:14px 0 0}
.pvp-pill{font-size:13px;color:#aab3bf;background:#101316;border:1px solid rgba(255,255,255,.08);padding:8px 10px;border-radius:999px}
.pvp-dot{width:6px;height:6px;border-radius:50%;background:#2b2f36;align-self:center}
/* === CTA 3-Plan buttons === */
.pv-cta-plans{display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; justify-content:center; margin:10px 0 6px;}
.pv-plan{cursor:pointer; border:1px solid rgba(255,255,255,.14); background:#0f1115; color:#e9eef9; padding:12px 14px; border-radius:12px; min-width:160px; display:grid; grid-template-rows:auto 1fr auto; gap:2px; position:relative;}
.pv-plan:hover{border-color:rgba(255,255,255,.28);}
.pv-plan .pv-plan-top{display:flex; justify-content:space-between; gap:10px; opacity:.9;}
.pv-plan .pv-plan-top em{font-style:normal; color:#9aa4b2; font-size:12px;}
.pv-plan .pv-plan-price{font-weight:800; font-size:18px; letter-spacing:.2px;}
.pv-plan--hot{background:linear-gradient(180deg, rgba(22,163,74,.18), rgba(22,163,74,.08)); border-color:rgba(34,197,94,.5);}
.pv-badge{position:absolute; top:-8px; right:-8px; background:#16a34a; color:#041408; font-weight:800; font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.2);}
/* === Tier Information === */
.pv-tierinfo{margin:14px auto 8px; width:min(1100px,92vw);}
.pv-tiergrid{display:grid; gap:12px; grid-template-columns:1fr;}
@media (min-width:900px){ .pv-tiergrid{grid-template-columns:repeat(3,1fr);} }
.pv-tiercard{background:#0d1118; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px;}
.pv-tiercard header h4{margin:0 0 2px; font-size:18px; font-weight:800;}
.pv-tiercard header p{margin:0 0 8px; color:#9aa4b2; font-size:12.5px;}
.pv-tiercard ul{margin:0; padding-left:18px; line-height:1.5;}
.pv-tiercard--hot{outline:2px solid rgba(34,197,94,.55); outline-offset:2px; position:relative;}
.pv-tiercard .pv-flag{position:absolute; top:10px; right:10px; font-size:11px; background:#16a34a; color:#041408; padding:4px 8px; border-radius:999px; font-weight:800;}
/* === Common block === */
.pv-tiercommon{margin:10px auto 0; background:#0b0f16; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; width:min(1100px,92vw);}
.pv-tiercommon h5{margin:0 0 6px; font-size:14px;}
.pv-tiercommon ul{margin:0; padding-left:18px;}
/* === Payment strip === */
.pv-paystrip{margin:10px auto 2px; width:min(1100px,92vw); background:#0c121b; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px;}
.pv-paylist{display:flex; flex-wrap:wrap; gap:10px 16px; list-style:none; margin:0; padding:0; align-items:center; justify-content:center;}
.pv-paylist li{display:flex; gap:8px; align-items:center; color:#cdd6e5; font-size:13.5px;}
.pv-paylist svg{width:18px; height:18px; opacity:.9;}
/* === Optional compare === */
.pv-compare{margin:6px auto 0; width:min(900px,92vw);}
.pv-compare summary{cursor:pointer; color:#cdd6e5; font-weight:700;}
.pv-compare ul{margin:8px 0 0 18px;}
/* Testimonials (kept from your previous styles) */
#vault-reel-testimonials{
--bg:#0b0b0d; --card:#121216; --text:#e7e9ea; --muted:#9aa0a6; --border:rgba(255,255,255,.08);
--accent:#b6ff3b; --accent2:#ff66d1; --shadow:0 10px 30px rgba(0,0,0,.35);
}
.vr-wrap{background:var(--bg); padding:56px 0;}
.vr-container{width:min(1200px,92vw); margin:0 auto;}
.vr-header{text-align:center; margin-bottom:18px;}
.vr-kicker{color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-size:12px; margin:0 0 8px;}
.vr-title{margin:0; color:var(--text); font-size:clamp(28px,3.6vw,42px); font-weight:800;}
.vr-gradient{background:linear-gradient(92deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.vr-sub{color:var(--muted); margin:8px 0 0;}
.vr-strip{display:flex; gap:16px; overflow:auto; padding:10px 2px; scroll-snap-type:x mandatory;}
.vr-strip::-webkit-scrollbar{height:8px;} .vr-strip::-webkit-scrollbar-thumb{background:var(--border); border-radius:999px;}
.vr-tile{scroll-snap-align:start; min-width:260px; max-width:320px; width:28vw;}
.vr-frame{position:relative; background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; aspect-ratio:9/16; box-shadow:var(--shadow);}
.vr-thumb{width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.92);}
.vr-play{position:absolute; top:10px; right:10px; width:42px; height:42px; border-radius:999px; border:1px solid var(--border);
background:rgba(255,255,255,.06); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter: blur(6px);}
.vr-play:hover{background:rgba(255,255,255,.12);}
.vr-cta{text-align:center; margin-top:20px;}
.vr-note{color:var(--muted); font-size:12px; margin-top:8px;}
.vr-modal[hidden]{display:none;}
.vr-modal{position:fixed; inset:0; z-index:9999;}
.vr-modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6);}
.vr-modal-dialog{position:relative; width:min(840px,94vw); margin:6vh auto; background:var(--card); border:1px solid var(--border);
border-radius:16px; box-shadow:var(--shadow); padding:10px;}
.vr-player{aspect-ratio:9/16; background:#000; border-radius:12px; overflow:hidden;}
.vr-close{position:absolute; top:6px; right:10px; font-size:28px; line-height:1; color:#fff; background:transparent; border:0; cursor:pointer;}
@media (min-width:700px){ .vr-player{aspect-ratio:16/9;} }
.vr-meta{padding:10px 6px 0; color:var(--text);}
.vr-name{font-weight:700; font-size:14px; line-height:1.3;}
.vr-quote{font-size:13px; color:var(--muted); margin-top:2px; line-height:1.35;}
/* ---------- dealbar (safe) ---------- */
.dealbar .deal-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.dealbar .pvp-demo-btn{
display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.14));
color:#e8f0ff;font-weight:700;line-height:1;cursor:pointer;
box-shadow:0 2px 0 rgba(0,0,0,.25) inset,0 8px 24px rgba(0,0,0,.25);
transition:transform .15s ease,border-color .15s ease,background .15s ease
}
.dealbar .pvp-demo-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.25)}
.dealbar .pvp-demo-btn:active{transform:translateY(0)}
.dealbar .pvp-demo-btn svg{opacity:.9}
/* ---------- pricing (strictly inside #pv-pricing) ---------- */
#pv-pricing .pvp-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px}
#pv-pricing .pvp-head-actions{justify-self:end;display:flex;gap:10px;flex-wrap:wrap}
#pv-pricing .pvp-demo-btn{
display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.14));
color:#e8f0ff;font-weight:700;line-height:1;cursor:pointer;
box-shadow:0 2px 0 rgba(0,0,0,.25) inset,0 8px 24px rgba(0,0,0,.25);
transition:transform .15s ease,border-color .15s ease,background .15s ease
}
#pv-pricing .pvp-demo-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.25)}
#pv-pricing .pvp-demo-btn:active{transform:translateY(0)}
#pv-pricing .pvp-demo-btn svg{opacity:.9}
/* >>> FIX: keep the Founders pill from stretching in the grid <<< */
#pv-pricing .pvp-head .pvp-badge{
display:inline-flex; /* keep natural width */
width:auto; max-width:100%;
justify-self:start; align-self:center;
padding:6px 12px; border-radius:999px; /* ensure pill look */
}
/* mobile stacks */
@media (max-width: 959px){
#pv-pricing .pvp-head{display:block}
#pv-pricing .pvp-head-actions{margin-top:12px}
}
/* ===== FINAL PRICING HEADER FIX ===== */
#pv-pricing .pvp-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
text-align: center;
padding-bottom: 0;
}
/* Left: Founders badge */
#pv-pricing .pvp-head .pvp-badge {
flex-shrink: 0;
background: #c0ff2f0a;
border: 1px solid #a2ff2f40;
padding: 6px 16px;
border-radius: 999px;
font-weight: 700;
color: #caff75;
font-size: 0.9rem;
white-space: nowrap;
box-shadow: 0 0 12px rgba(172, 255, 61, 0.15);
}
/* Center: Headline */
#pv-pricing .pvp-head h2.pvp-title {
flex-grow: 1;
text-align: center;
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 800;
margin: 0 auto;
color: #fff;
background: none;
line-height: 1.2;
}
/* Right: CTA or demo button area */
#pv-pricing .pvp-head-actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
}
/* Demo button */
#pv-pricing .pvp-demo-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
background: #0c0c0c;
border: 1px solid rgba(255, 255, 255, 0.14);
color: #f1f1f1;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: 0.2s ease;
}
#pv-pricing .pvp-demo-btn:hover {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.25);
color: #a6ff58;
}
#pv-pricing .pvp-demo-btn svg {
opacity: 0.9;
}
/* Responsive adjustments */
@media (max-width: 900px) {
#pv-pricing .pvp-head {
flex-direction: column;
text-align: center;
gap: 10px;
}
#pv-pricing .pvp-head .pvp-badge,
#pv-pricing .pvp-head-actions {
justify-content: center;
}
#pv-pricing .pvp-head h2.pvp-title {
order: 1;
}
#pv-pricing .pvp-head .pvp-badge {
order: 0;
}
#pv-pricing .pvp-head-actions {
order: 2;
}
}
/* =========================
PROOF / SCREENSHOT STRIP
========================= */
.pv-proof{
--card:#0f1522; --bd:rgba(255,255,255,.08); --muted:#9aa3ad;
width:min(1200px,92vw); margin:40px auto 10px; color:#e7e9ee;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.pv-proof__kicker{
display:inline-block; font-weight:800; font-size:12px; letter-spacing:.08em;
text-transform:uppercase; color:#cfe3ff; background:#0e1a2a;
border:1px solid #1e2d45; border-radius:999px; padding:6px 10px;
}
.pv-proof__title{
margin:10px 0 6px; font-weight:900; line-height:1.15;
font-size:clamp(24px,3.2vw,34px); letter-spacing:.2px;
}
.pv-proof__title span{
background:linear-gradient(90deg,#caff75 0%,#a6ff58 40%,#ff90d0 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.pv-proof__sub{ margin:0 0 18px; color:var(--muted); font-weight:500 }
.pv-proofstrip{
list-style:none; padding:0; margin:0;
display:grid; gap:14px;
grid-template-columns:repeat(12,1fr);
}
@media (max-width:1100px){ .pv-proofstrip{ grid-template-columns:repeat(8,1fr) } }
@media (max-width:760px){ .pv-proofstrip{ grid-template-columns:repeat(4,1fr) } }
.pv-proofstrip li{
grid-column:span 4; /* default span */
}
.pv-proofstrip li:nth-child(1){ grid-column:span 12 } /* big header sheet */
.pv-proofstrip li:nth-child(2){ grid-column:span 6 }
.pv-proofstrip li:nth-child(3){ grid-column:span 6 }
.pv-proofstrip li:nth-child(4){ grid-column:span 6 }
.pv-proofstrip li:nth-child(5){ grid-column:span 6 }
.pv-proofstrip img{
display:block; width:100%; height:auto; aspect-ratio:16/9;
object-fit:cover; border-radius:14px; background:#000;
border:1px solid var(--bd);
box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
opacity:1 !important; visibility:visible !important;
}
.pv-proofstrip img:hover{
transform:translateY(-2px);
border-color:rgba(35,217,111,.45);
box-shadow:0 18px 48px rgba(16,172,75,.15), inset 0 0 0 1px rgba(35,217,111,.18);
}
/* Tighten the CTA row under this block to match page */
.pv-proof .pv-cta-plans{
margin-top:18px; justify-content:center;
}
.pv-proof .pv-plan{
background:var(--card); border:1px solid var(--bd); border-radius:16px;
}
/* ====== PROOF STRIP 6/6 layout (1 big square + 4 small squares) ====== */
.pv-proofstrip{
list-style:none; padding:0; margin:0;
display:grid; gap:14px;
grid-template-columns:repeat(12,1fr); /* 12-col grid */
}
/* Make each tile a true square using the padding trick */
.pv-proofstrip li{
position:relative; overflow:hidden; border-radius:14px;
background:#0b0f17; border:1px solid rgba(255,255,255,.08);
box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
}
/* The first (featured) image = half width, double height → big square */
.pv-proofstrip li:first-child{
grid-column:span 6; /* left half */
grid-row:span 2; /* equal to 2 small tiles high */
}
/* The 4 remaining tiles = quarter of the right half (3 cols each) */
.pv-proofstrip li:nth-child(n+2){
grid-column:span 3; /* 3 cols × 4 = 12 cols (right half) */
}
/* Square ratio for all tiles */
.pv-proofstrip li::before{
content:""; display:block; padding-top:100%; /* 1:1 */
}
/* Image fills its tile */
.pv-proofstrip img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; display:block;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
opacity:1 !important; visibility:visible !important;
}
.pv-proofstrip img:hover{
transform:scale(1.02);
border-color:rgba(35,217,111,.45);
box-shadow:0 18px 48px rgba(16,172,75,.15), inset 0 0 0 1px rgba(35,217,111,.18);
}
/* Responsive: stack cleanly on phones (each tile full width) */
@media (max-width:760px){
.pv-proofstrip{ grid-template-columns:repeat(4,1fr) }
.pv-proofstrip li:first-child{ grid-column:span 4; grid-row:span 1; }
.pv-proofstrip li:nth-child(n+2){ grid-column:span 2; } /* 2-up */
}
/* rmeoved 999 tier */
/* 1. Center the Pricing Grid Container and set two columns on desktop */
.pvp-grid {
/* Set a max width appropriate for two cards and spacing */
max-width: 650px !important;
/* Centers the entire block horizontally (the critical fix) */
margin: 40px auto !important;
}
/* 2. Force the two-column layout on desktop (Overwriting the original 3-column rule) */
@media (min-width: 860px) {
.pvp-grid {
/* This displays only two equal columns */
grid-template-columns: 1fr 1fr !important;
}
}
/* 3. Center the Top CTA Buttons */
.pv-cta-plans {
justify-content: center !important; /* Centers the buttons horizontally */
margin-left: auto !important;
margin-right: auto !important;
}
/* Center the main call-to-action button or text container */
.pv-cta-plans, .pricing-header-wrapper {
/* Use flexbox or text-align to center inline elements */
text-align: center !important;
/* Center the block element itself if it has a max-width */
margin-left: auto !important;
margin-right: auto !important;
}
/* Specific button fix */
.pvp-cta {
display: block !important; /* Makes sure the button takes up space */
margin-left: auto !important;
margin-right: auto !important;
}
/* real people, real results */
/* RESET & SCOPE */
#pv-widget-wrapper {
width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box;
background-color: #000000; color: #ffffff; font-family: 'Inter', sans-serif;
contain: content;
}
#pv-widget-wrapper * { box-sizing: border-box; }
#pv-widget-wrapper .pv-section {
padding: 40px 0; max-width: 1200px; margin: 0 auto;
}
/* HEADER */
#pv-widget-wrapper .pv-header-centered {
text-align: center; max-width: 600px; margin: 0 auto 30px auto; padding: 0 20px;
display: flex; flex-direction: column; align-items: center;
}
#pv-widget-wrapper .pv-pill {
display: inline-block; background-color: #1a1a1a; color: #f1c40f;
font-size: 12px; font-weight: 600; padding: 6px 16px;
border-radius: 50px; margin-bottom: 15px; border: 1px solid #333;
}
#pv-widget-wrapper .pv-main-title {
font-size: 32px; font-weight: 700; color: #ffffff; margin: 0 0 10px 0; line-height: 1.2;
}
#pv-widget-wrapper .pv-text-yellow { color: #ffcc00; }
#pv-widget-wrapper .pv-text-orange { color: #ff6633; }
#pv-widget-wrapper .pv-sub-text {
color: #999; font-size: 14px; margin: 0; max-width: 400px;
}
/* SCROLL CONTAINER */
#pv-widget-wrapper .pv-scroll-container {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
gap: 20px; padding: 0 20px 20px 20px; scrollbar-width: none;
}
#pv-widget-wrapper .pv-scroll-container::-webkit-scrollbar { display: none; }
/* --- CARD SIZE --- */
#pv-widget-wrapper .pv-card {
flex: 0 0 250px;
scroll-snap-align: center;
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 12px;
overflow: hidden;
position: relative;
content-visibility: auto;
/* Reduced height estimate */
contain-intrinsic-size: 250px 420px;
}
@media (max-width: 768px) {
#pv-widget-wrapper .pv-card {
flex: 0 0 250px;
contain-intrinsic-size: 250px 420px;
}
}
#pv-widget-wrapper .pv-card-head {
padding: 12px; display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid #222; background: #1a1a1a;
}
#pv-widget-wrapper .pv-name { margin: 0; font-size: 13px; font-weight: 600; color: #fff; }
#pv-widget-wrapper .pv-badge { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: bold; margin-top: 3px; display: inline-block; color: #fff; }
#pv-widget-wrapper .pv-badge.yt { background: #FF0000; }
#pv-widget-wrapper .pv-badge.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
#pv-widget-wrapper .pv-badge.tiktok { background: #00f2ea; color: #000; }
#pv-widget-wrapper .pv-badge.money { background: #2ecc71; color: #000; }
#pv-widget-wrapper .pv-metric { text-align: right; }
#pv-widget-wrapper .pv-value { display: block; font-size: 13px; font-weight: bold; color: #2ecc71; }
#pv-widget-wrapper .pv-card-footer {
padding: 10px 12px; font-size: 11px; color: #aaa; font-style: italic; background: #111; border-top: 1px solid #222; margin: 0;
}
#pv-widget-wrapper .pv-card-footer p { margin: 0; }
/* --- THE CROPPING LOGIC --- */
#pv-widget-wrapper .pv-ba-slider {
position: relative; width: 100%; height: auto;
/* 3/5 is shorter than a full phone screen -> Cuts off top/bottom */
aspect-ratio: 3 / 5;
overflow: hidden; cursor: ew-resize; user-select: none;
}
#pv-widget-wrapper .pv-img-base {
display: block; width: 100%; height: 100%;
/* 'cover' fills the box, effectively cropping excess height */
object-fit: cover;
/* 'center 15%' moves focus slightly down, hiding the top status bar */
object-position: center 15%;
background: #000;
}
#pv-widget-wrapper .pv-resize-frame {
position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden;
border-right: 1.5px solid #fff; z-index: 10; pointer-events: none; will-change: width;
background: #000;
}
#pv-widget-wrapper .pv-resize-frame img {
position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none;
/* Important: Must match the base image exactly */
object-fit: cover;
object-position: center 15%;
}
#pv-widget-wrapper .pv-handle {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: rgba(255,255,255,0.9); border-radius: 50%; z-index: 20; display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.5); will-change: left;
}
#pv-widget-wrapper .pv-handle-arrows { color: #000; font-size: 16px; line-height: 1; }
/* NAV BUTTONS */
#pv-widget-wrapper .pv-nav-row {
display: flex; gap: 12px; justify-content: center; margin-top: 20px; padding-bottom: 20px;
}
#pv-widget-wrapper .pv-nav-btn {
background: #222; border: 1px solid #444; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
#pv-widget-wrapper .pv-nav-btn:hover { background: #fff; color: #000; border-color: #fff; }
/* Add this inside your existing CSS block */
#pv-widget-wrapper .pv-handle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Creates a large invisible touch area (60x60px) */
width: 60px;
height: 60px;
background: transparent;
z-index: 30;
cursor: ew-resize;
}
/* screenshots */
/* 1. The Container - Hides the overflow */
.screenshot-marquee-wrapper {
width: 100%;
overflow: hidden; /* Hides the scrollbar */
white-space: nowrap; /* Forces items into one long line */
background: #000; /* Optional: Match your dark theme */
padding: 40px 0;
position: relative;
}
/* 2. The Track - The moving part */
.marquee-track {
display: inline-flex; /* Aligns items horizontally */
gap: 30px; /* Space between screenshots */
animation: scroll-left 30s linear infinite; /* The moving magic */
}
/* 3. The Hover Effect - Optional: Pauses on hover */
.screenshot-marquee-wrapper:hover .marquee-track {
animation-play-state: paused;
}
/* 4. The Item - Controlling the Size */
.marquee-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0; /* Prevents squishing */
}
/* The Screenshot Sizing */
.marquee-item .img-container img {
height: 450px; /* 1. REDUCED HEIGHT: Adjust this to make them smaller/larger */
width: auto; /* Maintains aspect ratio (prevents stretching) */
border-radius: 12px; /* Optional: Rounded corners */
box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Optional: Shadow */
object-fit: cover;
}
.marquee-item h5 {
margin-top: 15px;
color: #fff; /* Title color */
font-size: 16px;
text-align: center;
}
/* 5. The Animation Definition */
@keyframes scroll-left {
from {
transform: translateX(0);
}
to {
/* Moves the track to the left by 50% (since we duplicated the content) */
transform: translateX(-50%);
}
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.marquee-item .img-container img {
height: 250px; /* Even smaller on mobile */
}
.marquee-track {
gap: 15px; /* Smaller gap on mobile */
}
}
/* Dealbar v2 (2-column, no timer) */
.dealbar--v2{background:#0b101a;border-top:1px solid #172136;border-bottom:1px solid #172136}
.dealbar-v2__inner{max-width:1200px;margin:0 auto;padding:22px 16px;display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:center}
@media (max-width:960px){.dealbar-v2__inner{grid-template-columns:1fr;gap:14px}}
.deal-pill{display:inline-block;background:#165ef3;color:#fff;border-radius:999px;padding:6px 12px;font-weight:700}
.deal-title{margin:8px 0 2px;font-size:1.9rem;font-weight:800}
.deal-title .deal-price{color:#8ef26d}
.deal-sub{margin:0;opacity:.85}
/* Three plan buttons – consistent sizing & wrap */
.pv-cta-plans{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;max-width:960px}
@media (max-width:960px){.pv-cta-plans{justify-content:center}}
.pv-cta-plans .pv-plan{flex:1 1 280px;max-width:320px;border-radius:18px;padding:16px 18px;background:#0f1522;border:1px solid #1f2a3d;box-shadow:0 0 0 1px rgba(24,40,68,.25) inset;color:#e9f0ff;text-align:left}
.pv-plan--hot{box-shadow:0 0 0 1px rgba(24,68,33,.45) inset,0 0 24px rgba(16,172,75,.08)}
.pv-plan-top{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:6px;opacity:.95}
.pv-plan-top em{font-style:normal;opacity:.7;font-size:.9rem}
.pv-plan-price{display:block;font-weight:800;font-size:1.4rem;letter-spacing:.25px}
.pv-badge{display:inline-block;background:#10ac4b1a;color:#8ef26d;border:1px solid #1c3d2a;padding:2px 10px;border-radius:999px;margin-left:8px;font-size:.75rem;font-weight:700}
/* Pricing grid visual lift */
.pv-pricing .pvp-wrap{max-width:1200px;margin:0 auto}
.pvp-grid{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:18px}
@media (max-width:980px){.pvp-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pvp-grid{grid-template-columns:1fr}}
.pvp-card{background:#0b101a;border:1px solid #1a2333;border-radius:18px;padding:18px}
.pvp-card--highlight{border:1px solid #1c3d2a;box-shadow:0 0 0 1px rgba(43,152,98,.25) inset,0 10px 40px rgba(16,172,75,.12)}
.pvp-price{font-size:1.8rem}
/* UPI/GPay strip – tidy wrap on phones */
.pvp-payments{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:14px}
.pvp-pill{display:inline-flex;align-items:center;gap:8px;background:#0f1522;border:1px solid #1f2a3d;border-radius:999px;padding:6px 10px;white-space:nowrap}
/* Demo-reel modal – show all 3 CTAs nicely on all breakpoints */
.pv-vaulttabs__modal-actions{position:relative;margin-top:14px}
.pv-vaulttabs__modal-actions .pv-cta-plans{max-width:900px;margin:10px auto 0;justify-content:center}
.pv-vaulttabs__modal .pv-plan{flex:1 1 240px;max-width:300px}
@media (max-width:560px){.pv-vaulttabs__modal .pv-plan{flex:1 1 100%;max-width:100%}}
.pv-vaulttabs__modal{z-index:9999} /* make sure it floats over header */
/* Keep all other scattered CTAs “small”, centered */
.pv-inside__cta .pv-cta-plans,
.pv-contrast-cta .pv-cta-actions .pv-cta-plans,
.subscriber-update .pv-cta-plans,
.longlist-content .pv-cta-plans{max-width:860px;margin-left:auto;margin-right:auto}
/* ---- SCOPE EVERYTHING UNDER .pv-page ---- */
.pv-page{--bg:#0b0e13;--card:#111318;--text:#e7e9ee;--muted:#9aa3ad;--bd:rgba(255,255,255,.09);--bd2:rgba(255,255,255,.14);--green:#23d96f;--green2:#a7ff67}
.pv-page .video-wrap{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--bd)}
.pv-page .video-wrap iframe{width:100%;height:100%;display:block}
/* DEALBAR (first fold) */
.pv-page .dealbar{background:linear-gradient(180deg,rgba(18,22,30,.6),rgba(18,22,30,.2));border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:18px 0;position:relative}
.pv-page .dealbar-inner{width:min(1200px,92vw);margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center}
.pv-page .deal-pill{display:inline-block;background:#0e1a2a;border:1px solid #1e2d45;border-radius:999px;padding:6px 10px;font:700 12px/1 Inter,system-ui;color:#cfe3ff;margin-bottom:8px}
.pv-page .deal-title{margin:0;color:#fff;font:800 28px/1.2 Inter,system-ui;letter-spacing:.2px}
.pv-page .deal-title .deal-price{background:linear-gradient(90deg,#f6f1ff,#b5ff7a 55%,#5cffc0);-webkit-background-clip:text;background-clip:text;color:transparent}
.pv-page .deal-sub{margin:6px 0 0;color:var(--muted);font:500 15px/1.35 Inter,system-ui}
.pv-page .deal-timer{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.pv-page .deal-timer .tsep{opacity:.35;color:#fff;font-weight:800}
.pv-page .tbox{display:grid;place-items:center;min-width:86px;border:1px solid var(--bd);border-radius:12px;background:rgba(12,14,18,.65);padding:8px 10px}
.pv-page .tbox span{color:#fff;font:900 24px/1 Inter,system-ui;font-variant-numeric:tabular-nums}
.pv-page .tbox small{color:#9fb1c7;letter-spacing:.2em;font:700 10px/1 Inter,system-ui;margin-top:6px}
/* MINI 3-PLAN CTAs (pills) */
.pv-page .pv-cta-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:4px}
.pv-page .pv-plan{display:flex;flex-direction:column;gap:8px;justify-content:space-between;border:1px solid var(--bd);background:var(--card);border-radius:16px;padding:14px 16px;color:var(--text);text-align:left;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.pv-page .pv-plan:hover{transform:translateY(-2px);border-color:var(--bd2);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.pv-page .pv-plan--hot{border-color:rgba(35,217,111,.55);box-shadow:0 10px 28px rgba(35,217,111,.12),inset 0 0 0 1px rgba(35,217,111,.25)}
.pv-page .pv-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pv-page .pv-plan-top strong{font:800 16px/1 Inter,system-ui}
.pv-page .pv-plan-top em{font:700 11px/1 Inter,system-ui;background:#0e1117;border:1px solid var(--bd);padding:6px 8px;border-radius:999px;color:var(--muted);font-style:normal}
.pv-page .pv-plan--core .pv-plan-top em,
.pv-page .pv-plan--hot .pv-plan-top em{background:linear-gradient(90deg,var(--green),var(--green2));color:#0a0f0a;border:0}
.pv-page .pv-plan-price{font:700 16px/1.2 Inter,system-ui;color:#cfd5df}
.pv-page .pv-plan-price b,.pv-page .pv-plan-price strong{font:900 28px/1 Inter,system-ui;color:#fff}
.pv-page .pv-badge{display:none}
/* PRICING GRID tightening */
.pv-page .pv-pricing .pvp-wrap{width:min(1200px,92vw);margin:0 auto}
.pv-page .pv-pricing .pvp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pv-page .pv-pricing .pvp-card{border-radius:18px;border:1px solid var(--bd);background:var(--card)}
.pv-page .pv-pricing .pvp-card--highlight{border-color:rgba(35,217,111,.55);box-shadow:0 10px 28px rgba(35,217,111,.12),inset 0 0 0 1px rgba(35,217,111,.25)}
/* Section widths */
.pv-page .combine-padding-section-medium-5,
.pv-page .rich-text-block-4,
.pv-page .Aihero-content,
.pv-page .dealbar,
.pv-page #pv-pricing,
.pv-page #whats-inside,
.pv-page #vault-reel-testimonials,
.pv-page #pv-vaulttabs,
.pv-page #pv-transformation,
.pv-page .pv-reviews,
.pv-page .pv-stack,
.pv-page .longlist-card,
.pv-page .longlist-content,
.pv-page .subscriber-update{scroll-margin-top:84px}
@media (max-width:980px){
.pv-page .dealbar-inner{grid-template-columns:1fr;gap:12px}
.pv-page .deal-timer{justify-content:flex-start}
.pv-page .pv-cta-plans{grid-template-columns:1fr}
.pv-page .pv-pricing .pvp-grid{grid-template-columns:1fr}
}
.Aihero-content-heading {
text-align: center;
font-family: 'Inter', sans-serif;
font-weight: 800;
font-size: clamp(2rem, 3vw, 2.8rem);
line-height: 1.2;
margin-bottom: 1rem;
color: #fff;
}
.Aihero-content-heading .highlight {
background: linear-gradient(90deg, #caff75 0%, #a6ff58 30%, #ff90d0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.Aihero-subtext {
text-align: center;
color: #b8b8b8;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 3rem;
}
.video-wrap iframe {
border-radius: 14px;
max-width: 100%;
height: 480px;
}
/* IMPORT FONTS (Crucial for the Premium Look) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
/* Scoped Styles for Manifesto Block */
.pv-manifesto {
position: relative;
padding: 100px 20px; /* More breathing room */
background: #050608; /* Darker, richer black */
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
overflow: hidden;
font-family: 'Inter', sans-serif;
}
/* Improved Ambient Glow (More Vibrant) */
.pv-manifesto::before {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(142, 45, 226, 0.2) 0%, rgba(0,0,0,0) 70%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
.pv-manifesto__inner {
max-width: 1200px; /* Wider for impact */
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr; /* Give more space to images */
gap: 80px;
align-items: center;
position: relative;
z-index: 1;
}
/* --- LEFT COLUMN: COPY --- */
.pv-manifesto__content {
display: flex;
flex-direction: column;
gap: 32px;
}
.pv-tag-origin {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 99px;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1.5px;
color: #9aa3ad;
width: fit-content;
backdrop-filter: blur(10px);
}
.pv-tag-dot { width: 8px; height: 8px; background: #23d96f; border-radius: 50%; box-shadow: 0 0 10px #23d96f; }
.pv-manifesto__title {
font-size: clamp(2.5rem, 5vw, 3.5rem); /* Bigger, Bolder */
font-weight: 800;
line-height: 1.1;
color: #fff;
letter-spacing: -0.02em;
}
.pv-manifesto__gradient {
background: linear-gradient(90deg, #c471ed 0%, #f64f59 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pv-manifesto__text {
font-size: 1.15rem;
line-height: 1.7;
color: #b0b8c3;
font-weight: 400;
}
.pv-manifesto__text strong { color: #fff; font-weight: 600; }
.pv-manifesto__quote {
border-left: 4px solid #8e2de2;
padding-left: 24px;
font-style: italic;
color: #e5e7eb;
font-size: 1.05rem;
background: linear-gradient(90deg, rgba(142, 45, 226, 0.08) 0%, rgba(0,0,0,0) 100%);
padding: 20px 24px;
border-radius: 0 16px 16px 0;
}
.pv-manifesto__proof {
display: flex;
align-items: center;
gap: 16px;
font-size: 0.95rem;
color: #9ca3af;
background: rgba(255,255,255,0.02);
padding: 12px;
border-radius: 12px;
width: fit-content;
border: 1px solid rgba(255,255,255,0.05);
}
.pv-manifesto__avatars { display: flex; margin-left: 10px; }
.pv-m-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: #111827;
border: 2px solid #050608;
margin-left: -12px;
display: grid;
place-items: center;
font-size: 11px;
color: #fff;
font-weight: bold;
}
.pv-m-avatar:first-child { margin-left: 0; }
/* --- RIGHT COLUMN: VISUAL GRID --- */
.pv-manifesto__visual {
position: relative;
}
/* Masonry Layout */
.pv-manifesto-grid {
column-count: 2;
column-gap: 20px;
}
.pv-manifesto-item {
break-inside: avoid;
margin-bottom: 20px;
position: relative;
border-radius: 16px;
overflow: hidden; /* Fixes corner bleed */
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.pv-manifesto-img {
width: 100%;
height: auto;
display: block;
background: #1a1a1a;
}
/* Hover Effect: Lift & Glow */
.pv-manifesto-item:hover {
transform: translateY(-8px) scale(1.02);
border-color: rgba(142, 45, 226, 0.5);
box-shadow: 0 30px 60px rgba(142, 45, 226, 0.15);
z-index: 10;
}
/* Mobile Responsive */
@media (max-width: 900px) {
.pv-manifesto { padding: 60px 20px; }
.pv-manifesto__inner { grid-template-columns: 1fr; gap: 50px; }
.pv-manifesto__title { font-size: 2.2rem; }
.pv-manifesto-grid { column-gap: 12px; }
.pv-manifesto-item { margin-bottom: 12px; }
.pv-manifesto__proof { width: 100%; justify-content: center; }
}
/* whats in */
.pv-proof__grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap:20px;
margin:32px 0;
}
.pv-proof__item{
display:flex;
gap:14px;
padding:18px;
border-radius:14px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.02);
transition:all .2s ease;
}
.pv-proof__item:hover{
border-color: rgba(255,255,255,.16);
background:rgba(255,255,255,.04);
}
.pv-proof__check{
font-size:14px;
font-weight:700;
opacity:.8;
margin-top:3px;
}
.pv-proof__item strong{
display:block;
font-size:15px;
margin-bottom:4px;
}
.pv-proof__item p{
font-size:13px;
opacity:.65;
margin:0;
line-height:1.4;
}
/* Deployment Modes */
.pv-proof__modes{
display:grid;
grid-template-columns: 1fr 1fr;
gap:18px;
margin-top:24px;
}
.pv-mode{
padding:20px;
border-radius:16px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
}
.pv-mode h4{
margin:0 0 8px 0;
font-size:15px;
}
.pv-mode p{
font-size:13px;
opacity:.7;
line-height:1.5;
margin:0;
}
.pv-mode--pro{
border-color: rgba(120,255,190,.25);
background: rgba(120,255,190,.05);
}
/* Responsive */
@media (max-width: 768px){
.pv-proof__modes{
grid-template-columns: 1fr;
}
}
/* Layout */
.pv-cta-plans{
display:grid;
grid-template-columns: 1fr 1fr;
gap:18px;
}
/* Base mode card */
.pv-mode{
position:relative;
padding:24px;
border-radius:18px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
text-align:left;
cursor:pointer;
transition: all .18s ease;
display:flex;
flex-direction:column;
gap:14px;
}
.pv-mode:hover{
transform: translateY(-3px);
border-color: rgba(255,255,255,.18);
background:rgba(255,255,255,.05);
}
/* Top section */
.pv-mode__top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}
.pv-mode h4{
margin:0;
font-size:16px;
font-weight:700;
line-height:1.3;
}
.pv-mode__was{
display:block;
font-size:13px;
opacity:.6;
text-decoration: line-through;
margin-bottom:4px;
}
/* Body text */
.pv-mode p{
margin:0;
font-size:13px;
line-height:1.5;
opacity:.75;
}
/* Badge */
.pv-mode__badge{
font-size:11px;
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.04);
white-space:nowrap;
}
.pv-mode__badge--pro{
border-color: rgba(120,255,190,.3);
background: rgba(120,255,190,.12);
}
/* Pro highlight */
.pv-mode--pro{
border-color: rgba(120,255,190,.25);
background: rgba(120,255,190,.06);
}
/* Core subtle glow */
.pv-mode--core{
border-color: rgba(255,255,255,.12);
}
/* Responsive */
@media (max-width: 768px){
.pv-cta-plans{
grid-template-columns: 1fr;
}
}
/* layout */
.pv-cta-plans{
display:grid;
grid-template-columns: 1fr 1fr;
gap:18px;
}
/* make pv-plan look like pv-mode */
.pv-plan.pv-mode{
padding:24px !important;
border-radius:18px !important;
border:1px solid rgba(255,255,255,.08) !important;
background:rgba(255,255,255,.03) !important;
text-align:left !important;
cursor:pointer !important;
transition: all .18s ease !important;
display:flex !important;
flex-direction:column !important;
gap:14px !important;
min-height: unset !important;
}
.pv-plan.pv-mode:hover{
transform: translateY(-3px);
border-color: rgba(255,255,255,.18) !important;
background:rgba(255,255,255,.05) !important;
}
/* top row */
.pv-mode__top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}
.pv-plan.pv-mode h4{
margin:0;
font-size:16px;
font-weight:700;
line-height:1.3;
}
.pv-mode__was{
display:block;
font-size:13px;
opacity:.6;
text-decoration: line-through;
margin-bottom:4px;
}
.pv-mode__desc{
margin:0;
font-size:13px;
line-height:1.5;
opacity:.75;
}
/* badges */
.pv-mode__badge{
font-size:11px;
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.04);
white-space:nowrap;
}
.pv-mode__badge--pro{
border-color: rgba(120,255,190,.3);
background: rgba(120,255,190,.12);
}
/* pro highlight */
.pv-plan.pv-mode--pro{
border-color: rgba(120,255,190,.25) !important;
background: rgba(120,255,190,.06) !important;
}
/* responsive */
@media (max-width: 768px){
.pv-cta-plans{ grid-template-columns: 1fr; }
}
/* pricing css */
.pv-pricing{
padding:80px 0;
}
.pvp-wrap{
max-width:1100px;
margin:auto;
}
.pvp-header{
text-align:center;
margin-bottom:40px;
}
.pvp-pill{
display:inline-block;
padding:6px 14px;
border-radius:999px;
background:#111;
border:1px solid #222;
font-size:12px;
}
.pvp-title{
font-size:40px;
margin-top:18px;
font-weight:700;
}
.pvp-title span{
color:#B8F34E;
}
.pvp-sub{
margin-top:10px;
color:#aaa;
}
.pvp-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
margin-top:40px;
}
.pvp-card{
background:#0c1016;
border-radius:18px;
padding:28px;
border:1px solid #222;
}
.pvp-card-core{
border:1px solid #2af598;
box-shadow:0 0 40px rgba(42,245,152,0.1);
}
.pvp-plan{
font-size:22px;
margin-bottom:10px;
}
.pvp-desc{
color:#aaa;
margin-bottom:18px;
}
.pvp-price{
margin-bottom:20px;
}
.pvp-old{
text-decoration:line-through;
color:#777;
font-size:14px;
}
.pvp-now{
font-size:36px;
font-weight:700;
}
.pvp-list{
list-style:none;
padding:0;
margin-bottom:24px;
}
.pvp-list li{
margin-bottom:10px;
color:#ddd;
}
.pvp-cta{
width:100%;
padding:16px;
border-radius:12px;
background:#B8F34E;
color:#0b0f14;
font-weight:700;
border:none;
cursor:pointer;
font-size:16px;
}
.pvp-cta:hover{
filter:brightness(1.05);
}
.pvp-badge{
position:absolute;
margin-top:-44px;
background:#B8F34E;
color:#000;
padding:6px 14px;
border-radius:999px;
font-size:12px;
font-weight:600;
}
.pvp-badge-pro{
background:#2af598;
}
.pvp-included{
margin-top:40px;
text-align:center;
color:#ccc;
padding:18px;
border-radius:12px;
border:1px solid #222;
background:#0b0f14;
}
.pvp-payments{
margin-top:20px;
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
color:#888;
font-size:13px;
}
/* ===== Deal pill + timer row: Mobile-safe ===== */
.deal-pill-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap; /* IMPORTANT */
width:100%;
}
/* Pill should never force overflow */
.deal-pill{
display:inline-flex;
align-items:center;
max-width:100%;
white-space:normal; /* allow wrap */
overflow-wrap:anywhere;
}
/* Timer: keep compact + never overflow */
.deal-timer{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
max-width:100%;
flex: 0 1 auto;
}
/* Timer label can wrap; time stays tight */
.deal-timer__label{
font-size:12px;
opacity:.75;
white-space:nowrap;
}
.deal-timer__time{
font-variant-numeric: tabular-nums;
font-weight:800;
letter-spacing:0.3px;
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(184,243,78,.22);
background: rgba(184,243,78,.10);
color: rgba(255,255,255,.95);
}
/* Small urgency pulse (subtle, not cheesy) */
@keyframes pvPulse {
0%,100% { box-shadow: 0 0 0 rgba(184,243,78,0); }
50% { box-shadow: 0 0 24px rgba(184,243,78,.18); }
}
.deal-timer__time{
animation: pvPulse 2.2s ease-in-out infinite;
}
/* Mobile: stack nicely */
@media (max-width: 520px){
.deal-pill-row{
justify-content:flex-start;
}
.deal-timer{
width:100%;
justify-content:space-between;
}
.deal-timer__label{ white-space:normal; }
}
/* Base button style */
.pvp-cta,
.pv-plan button,
button.rzp-trigger{
background: transparent;
color: #ffffff;
border: 1px solid rgba(255,255,255,0.18);
padding: 14px 26px;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
transition: all .25s ease;
backdrop-filter: blur(6px);
}
/* Hover glow */
.pvp-cta:hover,
.pv-plan button:hover,
button.rzp-trigger:hover{
border-color: #B8F34E;
box-shadow:
0 0 12px rgba(184,243,78,0.35),
0 0 30px rgba(184,243,78,0.15);
transform: translateY(-1px);
}
/* Click effect */
.pvp-cta:active,
.pv-plan button:active{
transform: translateY(0px) scale(0.98);
}
/* Keep it clean on mobile tap */
@media (hover: none){
.pvp-cta:hover,
.pv-plan button:hover{
box-shadow:none;
border-color: rgba(255,255,255,0.18);
}
}
.pvp-card-core .pvp-cta{
border-color: rgba(184,243,78,0.35);
}
/* ===== UTILIZE SPACE BETTER (Right column grid) ===== */
.dealbar-v2__plans{
width: min(560px, 100%);
}
.pv-cta-plans{
display:grid !important;
grid-template-columns: 1fr 1fr;
gap:16px;
justify-items:stretch;
}
/* cards fill the grid nicely */
.pv-plan{
width: 100% !important;
flex: unset !important;
min-height: 205px;
}
/* ===== Buttons row becomes a 2-column grid aligned under cards ===== */
.pvp-actions-row{
display:grid !important;
grid-template-columns: 1fr 1fr;
gap:14px;
margin-top:14px;
align-items:stretch;
}
/* make both CTAs same height, same visual weight */
.pvp-demo-btn,
.pv-explore-link{
width:100%;
height:52px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
border-radius:999px;
text-align:center;
}
/* Explore button: looks like a real button now */
.pv-explore-link{
border:1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
}
.pv-explore-link:hover{
border-color: rgba(255,255,255,.22);
background: rgba(255,255,255,.06);
}
.pv-explore-link u{
text-underline-offset: 6px;
text-decoration-thickness: 2px;
}
/* Slightly tighten the arrow placement */
.pv-explore-arrow{
transform: translateY(1px);
opacity:.9;
}
/* ===== Tablet: still 2 cols ===== */
@media (max-width: 980px){
.dealbar-v2__plans{ width:100%; }
}
/* ===== Mobile: stack cards + stack buttons ===== */
@media (max-width: 620px){
.pv-cta-plans{
grid-template-columns: 1fr !important;
}
.pvp-actions-row{
grid-template-columns: 1fr !important;
}
}
/* === FIX: plan header overlap (badge + title collision) === */
.pv-plan-top{
display:grid !important;
grid-template-columns: 1fr auto; /* title left, badge right */
align-items:start;
gap:12px;
}
/* title block stays readable */
.pv-plan-top strong{
display:block;
line-height:1.05;
}
/* the right-side "pill" text (your ) must not overflow */
.pv-plan-top em{
max-width: 128px; /* prevents it from pushing over title */
white-space: normal; /* allow wrap */
overflow: hidden;
text-overflow: ellipsis;
text-align:right;
line-height:1.15;
padding:8px 10px; /* make it look like a pill */
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
}
/* Core badge style: keep green feel but never clip */
.pv-plan--core .pv-plan-top em{
border-color: rgba(120,255,190,.22);
background: rgba(120,255,190,.10);
}
/* Pro badge style: subtle */
.pv-plan--pro .pv-plan-top em{
border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.03);
}
/* Ensure top content never gets clipped by rounded corners */
.pv-plan{
overflow: hidden; /* keep */
padding-top: 18px;
}
/* move the badge slightly down so it never clashes with the top pill */
.pv-plan-badge{
top: 44px; /* was 12px */
}
/* If your badge bubble is absolutely positioned, force it to stay inside */
.pv-plan-badge{
right: 12px;
top: 12px;
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===== Base layout (responsive) ===== */
.dealbar--v2{ position:relative; }
.dealbar-v2__inner{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:36px;
}
/* ===== Pills row ===== */
.deal-pill-row{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:16px;
}
.deal-pill{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.04);
color:rgba(255,255,255,.86);
font-size:12px;
letter-spacing:.2px;
white-space:nowrap;
}
/* ===== TIMER: make it look urgent ===== */
.deal-timer{
display:inline-flex;
align-items:center;
gap:10px;
padding:8px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background:rgba(0,0,0,.38);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color:rgba(255,255,255,.92);
font-size:12px;
line-height:1;
white-space:nowrap;
transform: translateZ(0);
/* default subtle pulse */
animation: pvPulseSoft 2.2s ease-out infinite;
}
.deal-timer__label{ opacity:.86; }
.deal-timer__time{
font-variant-numeric: tabular-nums;
font-weight:900;
letter-spacing:.7px;
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
}
@keyframes pvPulseSoft {
0% { box-shadow: 0 0 0 0 rgba(255,255,255,.08); }
70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
/* URGENT MODE (last 60 mins) – looks "warning" without redesign */
.deal-timer.is-urgent{
border-color: rgba(255,255,255,.28);
background: rgba(0,0,0,.62);
animation: pvPulseUrgent 1.25s ease-in-out infinite;
box-shadow:
0 0 0 1px rgba(255,255,255,.08),
0 10px 28px rgba(0,0,0,.45);
}
/* NOTE: no hard-coded colors; using strong highlight via brightness + glow */
.deal-timer.is-urgent .deal-timer__time{
background: rgba(255,255,255,.14);
border-color: rgba(255,255,255,.24);
box-shadow: 0 0 22px rgba(255,255,255,.10);
transform: translateZ(0);
}
@keyframes pvPulseUrgent {
0%, 100% { transform: scale(1); filter: brightness(1.05); }
50% { transform: scale(1.02); filter: brightness(1.18); }
}
/* ===== Title / Copy ===== */
.deal-title{
margin:0 0 14px 0;
font-weight:800;
letter-spacing:-0.6px;
line-height:1.05;
}
.deal-title__accent{
opacity:.92;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
text-decoration-color: rgba(255,255,255,.20);
}
.deal-sub{
margin:0;
color:rgba(255,255,255,.70);
line-height:1.5;
max-width:62ch;
}
.deal-sub strong{ color:rgba(255,255,255,.92); }
.deal-micro{
display:flex;
align-items:center;
gap:10px;
margin-top:14px;
color:rgba(255,255,255,.62);
font-size:12px;
}
.deal-micro__dot{
width:8px; height:8px;
border-radius:50%;
background: rgba(255,255,255,.35);
box-shadow: 0 0 0 6px rgba(255,255,255,.05);
flex:0 0 auto;
}
/* ===== Plans: FORCE side-by-side on desktop, with proper spacing ===== */
.dealbar-v2__plans{ min-width: 460px; }
.pv-cta-plans{
display:flex;
align-items:stretch;
justify-content:flex-end;
gap:16px;
}
.pv-plan{
position:relative;
width: 230px; /* prevents overlap/stacking on desktop */
flex: 0 0 230px; /* locks the cards side-by-side */
padding:18px 16px 16px;
border-radius:18px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
color: rgba(255,255,255,.92);
cursor:pointer;
transition: transform .15s ease, border-color .15s ease, background .15s ease;
text-align:left;
min-height: 196px;
overflow:hidden;
}
.pv-plan:hover{
transform: translateY(-2px);
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.045);
}
.pv-plan--hot{
border-color: rgba(120,255,190,.35);
box-shadow: 0 0 0 1px rgba(120,255,190,.10), 0 16px 40px rgba(0,0,0,.35);
}
.pv-plan-top{
display:flex;
justify-content:space-between;
gap:10px;
align-items:flex-start;
margin-bottom:14px;
}
.pv-plan-top strong{ font-size:18px; }
.pv-plan-top em{
font-style:normal;
font-size:12px;
opacity:.72;
line-height:1.2;
text-align:right;
}
.pv-plan-price{
display:flex;
flex-direction:column;
gap:8px;
margin: 6px 0 10px;
}
.pv-plan-was{
font-size:14px;
opacity:.82;
text-decoration: line-through;
text-decoration-thickness: 2px;
text-decoration-color: rgba(255,255,255,.55);
}
.pv-plan-now{
font-size:18px;
line-height:1.05;
}
.pv-plan-now strong{
font-size:40px;
letter-spacing:-0.6px;
}
.pv-plan-foot{
display:block;
margin-top:8px;
font-size:12px;
opacity:.78;
}
.pv-plan-badge{
position:absolute;
top:12px;
right:12px;
padding:6px 10px;
border-radius:999px;
font-size:11px;
letter-spacing:.2px;
border:1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.35);
opacity:.92;
pointer-events:none;
}
.pv-plan-badge--pro{
border-color: rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
}
/* ===== Bottom row alignment (fix your highlighted area) ===== */
.pvp-actions-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-top:14px;
}
.pv-explore-link{
display:inline-flex;
align-items:center;
gap:10px;
color: rgba(255,255,255,.86);
text-decoration:none;
padding:10px 12px;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
white-space:nowrap;
}
.pv-explore-link:hover{
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.05);
}
.pv-explore-arrow{
display:inline-flex;
opacity:.85;
transform: translateY(1px);
}
/* ===== Responsive ===== */
@media (max-width: 980px){
.dealbar-v2__inner{ flex-direction:column; }
.dealbar-v2__plans{ min-width: 0; width:100%; }
/* cards become 2-column grid on tablet */
.pv-cta-plans{
justify-content:flex-start;
}
.pv-plan{
flex: 1 1 calc(50% - 8px);
width: auto;
max-width: 520px;
}
}
@media (max-width: 620px){
/* stack cards on mobile */
.pv-cta-plans{ flex-direction:column; }
.pv-plan{ flex: 1 1 auto; width:100%; }
/* actions stack nicely */
.pvp-actions-row{
flex-direction:column;
align-items:stretch;
}
.pv-explore-link{
justify-content:center;
}
}
.deal-pill-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.deal-pill-row > .deal-pill {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto; /* do not grow */
width: auto; /* only as wide as content */
max-width: 100%;
padding: 10px 16px;
border-radius: 999px;
line-height: 1.2;
white-space: normal;
aspect-ratio: auto !important;
height: auto !important;
}
.deal-pill-row > .deal-timer {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
width: auto;
max-width: 100%;
padding: 10px 14px;
border-radius: 999px;
aspect-ratio: auto !important;
height: auto !important;
}
@media (max-width: 768px) {
.deal-pill-row {
flex-direction: column;
align-items: center; /* not stretch */
}
.deal-pill-row > .deal-pill,
.deal-pill-row > .deal-timer {
width: auto;
max-width: calc(100% - 24px);
text-align: center;
}
}