@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --brand-yellow: #fbbf24;
    --brand-yellow-light: #fbbf2415;
}

.static-pg {
    font-family: "poppins", sans-serif!important;
}

.static-pg h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
    font-family: "mulish", sans-serif !important;
	font-weight: 700;
}

.font-poppins {
    font-family: "poppins", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}
.font-mulish {
    font-family: "mulish", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

.ot-banner-img-bg {
    background-image:url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731656412/corp-training-banner.webp');
    background-size: cover;
    height: 600px;
    background-repeat: no-repeat;
    background-position-x: right;
}

.rounded-4 {
	border-radius: 25px;
}

@media only screen and (max-device-width: 991px) {
	.virtual-img-bg {
		background-image: linear-gradient(to right, rgb(0 0 0 / 60%) 100%, rgb(255 255 255 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/06/1719494686/banner-img.webp')!important;
	}
	.client-img-bg {
		background-image: linear-gradient(to right, rgb(0 0 0 / 60%) 100%, rgb(255 255 255 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731582683/2d6359153bbe7a0b7478bb4f93479141.webp')!important;
	}
    .ot-banner-img-bg {
        background-image: linear-gradient(to right, rgb(0 0 0 / 40%) 100%, rgb(255 255 255 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731656412/corp-training-banner.webp')!important;
    }
	.p-o-banner-img {
		background-image: linear-gradient(to right, rgb(0 0 0 / 40%) 100%, rgb(255 255 255 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1732347379/program-overview-banner.webp')!important;
	}
	.arvr-banner-img-bg {
        background-image: linear-gradient(to right, rgb(0 0 0 / 40%) 100%, rgb(255 255 255 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1730201317/arvr-mobile-banner.webp')!important;
		background-position-y: 18% !important;
    }
	.llc-banner-img-bg {
        background-position-x: 85%!important;
		background-image: linear-gradient(to right, rgb(0 0 0 / 40%) 100%, rgb(102 102 102 / 0%) 100%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1732093743/accreditation-banner-img.webp')!important;
    }
	.why-choose-plod .border-col {
		border: none !important;
	}
	.plod-banner-img-bg {
		background-image: linear-gradient(to right, rgb(0 0 0 / 40%) 100%, rgb(102 102 102 / 0%) 100%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1732002223/plod-banner-img.webp')!important;
	}
	.lms-ehs-banner-img {
		background-image: linear-gradient(to right, rgb(0 0 0 / 40%) 100%, rgb(255 255 255 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731915241/ehs-lms-banner-img.webp')!important;
		background-position-x: 80%!important;
	}
	.about-us-banner {
		background-image: linear-gradient(to right, rgb(0 0 0 / 40%) 100%, rgb(255 255 255 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/12/1733223209/about-us-banner.webp')!important;
		background-position-x: 80%!important;
	}
	.why-choose-us-banner {
		background-image: linear-gradient(to right, rgb(0 0 0 / 40%) 100%, rgb(255 255 255 / 0%) 50%), url(https://media.hazwoper-osha.com/wp-content/uploads/2024/12/1733226658/why-choose-us-banner.webp)!important;
		background-position-x: 80%!important;
	}
	.webinar-banner  {
		background-image: linear-gradient(170deg, rgb(0 0 0 / 40%) 70%, rgb(255 255 255 / 0%) 100%), url(https://media.hazwoper-osha.com/wp-content/uploads/2025/02/1739259243/webinar-banner.webp)!important;
	}
}

@media only screen and (max-device-width: 991px) {
	.webinar-banner img {
		max-width: 170px;
	}
}
#accordion1 .accordion-item,
#accordion2 .accordion-item {
    background: #F4F4F4;
    margin-bottom: 20px;
    border-radius: 10px !important;
}

#accordion1 .accordion-item>.card-header,
#accordion2 .accordion-item>.card-header {
    border-radius: 10px !important
}

#accordion1 .accordion-button.active,
#accordion2 .accordion-button.active {
    border-color: #fcdb7a;
    outline: 0;
    box-shadow: none;
    color: #8b8b8b;
    background-color: #fcdb7a !important;
}

#accordion1 .accordion-button,
#accordion2 .accordion-button {
    color: black;
    background: #F4F4F4;
    font-weight: bold !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    align-items: start;
    font-family: "Mulish", sans-serif !important;
}

#accordion1 .accordion-body,
#accordion2 .accordion-body {
    background: #F4F4F4;
    color: #7E7E7E;
    font-size: 14px;
    border-radius: 0px 0px 10px 10px;
}

#accordion1 .accordion-button:focus,
#accordion2 .accordion-button:focus {
    box-shadow: none;
}

#accordion1 .accordion-button:not(.collapsed),
#accordion2 .accordion-button:not(.collapsed) {
    color: #000;
    box-shadow: none;
}

#accordion1 .accordion-button:not(.collapsed),
#accordion2 .accordion-button:not(.collapsed) {
    background: #F4F4F4
}

#accordion1 .accordion-button::after,
#accordion2 .accordion-button::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    float: right;
    transition: transform 0.3s ease;
    background-image: none;
}

#accordion1 .accordion-button:not(.collapsed)::after,
#accordion2 .accordion-button:not(.collapsed)::after {
    background-image: none;
}

.object-cover {
	object-fit: cover;
}

.object-contain {
	object-fit: contain;
}

.object-none {
	object-fit: none;
}
.h-50px {
	height: 50px;
}

.w-50px {
	width: 50px;
}
.h-70px {
	height: 70px;
}

.w-70px {
	width: 70px;
}
.h-80px {
	height: 80px;
}

.w-80px {
	width: 80px;
}
.h-500{
	height: 500px;
}
@media only screen and (min-device-width: 280px) and (max-device-width: 640px) {
	.h-500{
		height: 400px;
	}
}
/* corporate training */

.comparison-section .table-container .white-row {
	border-radius: 30px 30px 0px 0px;
}  
.comparison-section .table-container .black-row {  
    border-radius: 0px 0px 30px 30px;
}  

/* Styles for large screens and above */  
@media (min-width: 992px) {  
    .comparison-section .table-container .white-row {  
		border-radius: 30px 0px 0px 30px!important;
    }  

    .comparison-section .table-container .black-row {  
		border-radius: 0px 30px 30px 0px!important;
    }  
}  

.white-list, .black-list {
	list-style-type:square;
	margin-top: 20px;
}
.comparison-section .table-container .list-item {
    list-style: square;
	padding-left: 10px;
}
.comparison-section .table-container .white-list .list-item span{
    color: black;
}
.comparison-section .table-container .white-list .list-item  {
    color: #808080;
}
.comparison-section .table-container .black-list .list-item span {
    color: white
}
.comparison-section .table-container .black-list .list-item  {
    color: #FAE10B
}

.safetyforeveryone {
	background: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1730102296/Safetybg.webp) center / cover no-repeat;
	height: 300px;
	position: relative;
}

.safetyforeveryone img {
	position: absolute;
	bottom: 0;
}

.apart-from-others {
	background: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1730112317/oshapointsbg.webp) center / cover no-repeat;
}

.comparison-section {
	max-width: 70%;
	margin: 0 auto;
	border-radius: 10px;
}

.comparison-section .table-container  .list-item {
	margin-bottom: 1em;
	min-height: 45px;
    line-height: 1.4;
}

.comparison-section .table-container {
	position: relative;
}

.comparison-section .table-container:before {
	background: linear-gradient(90deg, rgba(254, 204, 7, 0) 0%, rgba(254, 204, 7, 0.5) 48.5%, rgba(254, 204, 7, 0) 100%);
    z-index: 1;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 13px;
    content: "";
    width: 100%;
    height: 50px;
}

.our-training .box {
	position: relative;
}

.our-training .yellow .icon-box {
	position: absolute;
	left: 15px;
	top: -45px;
}

.our-training .yellow .yellow-img-main:before {
	content: "";
	;
	width: 30px;
	height: 30px;
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.our-training .card-body {
	padding-top: 2em;
}

.our-training .yellow .yellow-img1:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1730191250/Interactive.webp)
}

.our-training .yellow .yellow-img2:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1730191227/Industry.webp);
}

.our-training .yellow .yellow-img3:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1730191180/Certificate.webp);
}

.our-training .card .card-body {
	background-color: #E2E2E2;
}

.our-training .card .card-body h5 {
	border-bottom: 1px solid black;
}

.contact-form .custom-btn {
	position: relative;
}

.contact-form .custom-btn .arrow-icon i {
	position: absolute;
	font-size: 2em;
	top: 5px;
	right: 4px;
}

.foam-section {
	background-color: #F4F4F4;
}

.foam-section .contact-form input,
.foam-section .contact-form textarea {
	background-color: #EEEEEE;
	border: none;
}

.foam-section .contact-form input::placeholder,
.foam-section .contact-form textarea::placeholder {
	color: #000;
	resize: none;
}

.image-container {
	position: relative;
	width: 100%;
	max-width: 400px;
	overflow: hidden;
	aspect-ratio: 3 / 3;
}

.image-container img {
	width: 100%;
	height: auto;
	transition: transform 0.3s ease;
}

.training-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	flex-direction: column;
	text-align: center;
	z-index: 5;
}

.image-container:hover .training-overlay {
	opacity: 1;
}

.image-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
	z-index: 1;
	pointer-events: none;
}

.corporate-training .image-container {
	position: relative;
}

.corporate-training .image-container h2 {
	position: absolute;
	bottom: 10px;
	color: #fff;
	width: 80%;
	z-index: 2;
	left: 5%;
	text-align: center;
}

.slick-dots li button:before {
	font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 27px;
    height: 4px;
    content: '•';
    text-align: center;
    opacity: .25;
    background: #ffd400;
    margin-top: 14px;
	color: transparent;
}

.slick-dots li.slick-active button:before {
	color: transparent;
}

.tbo-icon {
    filter: grayscale(1);
    transform: scale(0.6);
    transform-origin: bottom;
    transition: .2s cubic-bezier(1, 1, 1, 1)
}

.tbo-icon.active {
    filter: grayscale(0);
    transform: scale(1.2);
    transform-origin: center;
    transition: .2s cubic-bezier(1, 1, 1, 1)
}

.inner-title {
	font-family: mulish;
    font-size: 2.5rem;
}

/* arvr */

.arvr-banner-img-bg {
    background-image: url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1732092103/arvr-banner.webp');
    background-size: cover;
    height: 600px;
    background-repeat: no-repeat;
    background-position-x: right;
}

@media (max-width: 478px) {  
    .tabs .tabs__labels label{  
        width:100% 
    }  
    .tabs input+label {
        border-bottom: 1px solid #aaaaaa;
    }

    .tabs__labels {
        border-bottom:none!important
    }
}  



.tabs .tabs__content section {
	display: none;
	/* Hide all sections by default */
}

.tabs .tabs__content #content-fire-safety {
	display: block;
	/* Show the first section by default */
}

.tabs input {
	display: none;
	/* Hide radio inputs */
}

.tabs label {
	display: inline-block;
	padding: 2px 13px;
	color: #bbb;
	cursor: pointer;
	transition: color 0.3s, border-bottom 0.3s;
	margin-top: 30px;
}

.tabs label:hover {
	color: #555;
}

.tabs input:checked+label {
	color: #000;
	border-bottom: 4px solid #FCCD06;
}

.arvr {
	font-family: "poppins", sans-serif !important;
}

.bg-gray {
	background-color: #e6e7ee;
}


.get-touch-btn a.custom-btn {
	position: relative;
}

.get-touch-btn a.custom-btn .arrow-icon i {
	position: absolute;
	font-size: 1.75em;
	top: -12px;
	right: 5px;
}

.bespoke-process {
	background: url('https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729860278/beposk bg.webp') center / cover no-repeat;
}

.bespoke-process .box {
	position: relative;
}

.bespoke-process .yellow .icon-box {
	position: absolute;
	left: 15px;
	top: -45px;
}

.bespoke-process .yellow .yellow-img-main:before {
	content: "";
	width: 50px;
	height: 50px;
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.bespoke-process .card-body {
	padding-top: 4.3125em;
}

.bespoke-process .yellow .yellow-img1:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729944961/Assesment.webp)
}

.bespoke-process .yellow .yellow-img2:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729945456/contetndevelopment.webp);
}

.bespoke-process .yellow .yellow-img3:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729861008/Integration.webp);
}

.bespoke-process .yellow .yellow-img4:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729945416/trainingsupport.webp);
}

.main-tabs-container .tabs-head {
	display: flex;
	flex-wrap: wrap;
}

.main-tabs-container .nav-tabs .nav-item .nav-link {
	border: none;
	color: #000000;
	transition: all 0.3s;
	font-weight: 600;
	border-bottom: 1px solid #DEE2E6;
}

.main-tabs-container .nav-tabs .nav-item .active {
	border-bottom: 2px solid #FFC107;
	transition: all 0.3s;
	padding-bottom: 0.3em;
}

.main-saifty-training {
	background: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729920765/Safety.webp) center / cover no-repeat;
}

.main-saifty-training .training-points {
	position: relative;
	padding-left: 3.2em
}

.main-saifty-training .training-points:before {
	content: "";
	width: 45px;
	height: 45px;
	position: absolute;
	background-repeat: no-repeat;
	left: 0;
	top: 4px;
	background-color: #FFC107;
	background-position: center;
	background-size: auto;
}

.main-saifty-training .training-points1:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729945085/enhanced.webp);
}

.main-saifty-training .training-points2:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729923704/costsaving.webp);
}

.main-saifty-training .training-points3:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729945139/engaged.webp);
}

.main-saifty-training .training-points4:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729945178/customizedsolutionss.webp);
}

.main-saifty-training .training-points5:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729923704/costsaving.webp);
}

.main-saifty-training .training-points6:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729945282/interactivity.webp);
}

.main-saifty-training .training-points7:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729945324/realistic.webp);
}

.main-saifty-training .training-points8:before {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1729945248/customsolution.webp);
}

.contact {
	position: relative;
	padding: 0.5em 0.5em 0.5em 3.2em;
}

.envelope-icon {
	width: 40px;
	height: 40px;
	position: absolute;
	background-repeat: no-repeat;
	left: 5px;
	top: 9px;
	text-align: center;
	padding-top: 0.4em;
	background: #D8D8D8
}

/* plod page */

.plod-banner-img-bg {
	background-image: url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1732002223/plod-banner-img.webp');
	background-size: cover;
	height: 600px;
	background-repeat: no-repeat;
	background-position-x: right;
	background-position-y: 70%;
}

@media only screen and (min-device-width: 1876px) {
    .plod-banner-img-bg {
		background-position-y: 70%;
		height: 800px;
    }
}

@media only screen and (min-device-width: 280px) and (max-device-width: 640px) {
    .plod-banner-img-bg {
		background-position-x: 81%;
    }
}

.key-features ul li h5 {
	color: #000;
}

.key-features ul li {
	color: #808080;
	list-style: square;
}

.prod-journey {
	background: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/10/1730290304/Plod-journey.webp) center / cover no-repeat;
}

.boxes-counter {
	counter-reset: step-counter;
}

.boxes-step::before {
	counter-increment: step-counter;
	content: "" counter(step-counter);
	display: block;
	font-weight: bold;
	font-size: 1.2rem;
	color: #ffffff;
	position: absolute;
	left: 45%;
	right: 0;
	top: -10px;
	border-radius: 50%;
	background: #FFC107;
	width: 32px;
	height: 32px;
}

@media only screen and (max-device-width: 767px) {
	.boxes-step::before {
		left: 46%
	}
}

@media only screen and (max-device-width: 575px) {
	.boxes-step::before {
		left: 48%;
	}
	.how-works-col-shadow {
		box-shadow: 0px 5px 6px 0px #e3e3e3;
		margin-bottom: 35px;
	}
}

.how-its-work .works-box:hover {
	background-color: #FFC107;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.start-your-banner-img {
	position: absolute;
	bottom: 0;
}

.how-works-col {
	position: relative;
}

.how-works-col i {
	position: absolute;
	top: 20%;
	right: -6px;
	font-size: 2em;
}

.circle-design {
	position: relative;
}

.circle-design i {
	position: absolute;
	bottom: -14px;
	right: -14px;
	font-size: 1.5em;
	background: #FFC107;
	overflow: hidden;
	color: #FFC107;
	border-radius: 50%;
	z-index: 2;
}


/* plod page */


/* accreditation page */

.llc-banner-img-bg  {
	background-image: url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1732093743/accreditation-banner-img.webp');
	background-size: cover;
	height: 600px;
	background-repeat: no-repeat;
	background-position-x: right;
}

.accreditation {
	background: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1730451894/Accedition-bg.webp) center / cover no-repeat;
	height: 280px;
}

.accreditation .accreditation-col ul li {
	list-style: square;
	color: #808080;
	font-size: 16px;
}

.accreditation .accreditation-col ul li span {
	color: #4D4D4D;
}

.organization-promotion {
	background: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1730453432/compaint-safety.webp) center / cover no-repeat;
}

.what-do-you-got .what-do-col img {
	width: 70px;
	height: 70px;
}

.accreditation .accreditation-col img {
	position: absolute;
	bottom: 0;
}

/* accreditation page */

/* virtual-training */

.virtual-img-bg {
	background-image: linear-gradient(to right, rgb(0 0 0 / 30%) 40%, rgb(255 255 255 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/06/1719494686/banner-img.webp');
	background-size: cover;
	height: 600px;
	background-repeat: no-repeat;
	background-position-x: right;
}

.upcoming-section {
	background-image: linear-gradient(to right, rgb(0 0 0 / 30%) 40%, rgb(255 255 255 / 0%) 50%), url(https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731578669/video-calling.webp);
    background-size: cover;
    height: 360px;
    background-repeat: no-repeat;
    background-position-x: 0;
}

@media only screen and (max-device-width: 991px) {
	.upcoming-section {
		background-image: linear-gradient(to right, rgb(0 0 0 / 70%) 100%, rgb(255 255 255 / 0%) 100%), url(https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731578669/video-calling.webp);
        background-size: cover;
        background-position-x: 50%;
	}
}

.testimonial-slider {
	position: relative;
}

#prev-sub {
	cursor: pointer;
	background: #f4f4f4;
	padding: 10px 14px;
	margin-right: 5px;
}

#next-sub {
	cursor: pointer;
	background: #f4f4f4;
	padding: 10px 14px;
	margin-left: 5px;
}

#prev-sub:hover,
#next-sub:hover {
	background: #FCCD06;
}

#vit-beneficial .icon-box {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
#vit-beneficial .icon-box img {
	background-color: #ffc107;
    font-size: 2rem;
    padding: 8px;
    object-fit: contain;
    height: 50px;
}

.virtual-customer-support {
	background-image: linear-gradient(to right, rgb(194 194 194 / 59%) 100%, rgb(52 52 52 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731578625/customer-services.webp');
	background-size: cover;
	background-position-x: 55%;
}

.reviews-section-img {
	min-height: 211px;
	height: 100%;
}

.cursor-pointer {
	cursor: pointer;
}

.faq-list {
	list-style-type: lower-roman;
	padding-left: 19px;
}

.card-img img {
	min-height: 300px;
    object-fit: cover;
}
/* virtual-training */

/* online-stie-training */

.client-img-bg {
    background-image: linear-gradient(to right, rgb(0 0 0 / 30%) 40%, rgb(255 255 255 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731582683/2d6359153bbe7a0b7478bb4f93479141.webp');
    background-size: cover;
    height: 600px;
    background-repeat: no-repeat;
    background-position-x: right;
}

#ilt-beneficial .icon-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
#ilt-beneficial .icon-box img {
    background-color: #ffc107;
    font-size: 2rem;
    padding: 8px;
    object-fit: contain;
    height: 50px;
}

@media only screen and (min-device-width: 768px) {
	.il-border-r {
		border-right: 2px solid #cfcfcf;
	}

	.il-border-b {
		border-bottom: 2px solid #cfcfcf;
	}
}
/* online-stie-training */

/* EHS/LMS */
.optimize-safety-bg {
    background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731679468/optimize-safety-bg.webp);
	background-size: cover;
    background-position: center;
}
/* Item Styling */
.item-container {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-left: 1px solid #b4b4b4;
	min-height: 160px;
}

.item-container:first-child,
.item-container:last-child{
    border-left: none; /* Remove border on the first item */
}

/* Details Section (No changes to previous implementation) */
.item-container .details {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0);
    color: #fff;
    text-align: center;
    padding: 20px;
    transition: bottom 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.item-container:hover .details {
    bottom: 0;
    opacity: 1;
}

/* Optional Icon Hover Effect */
.icon-wrapper img {
    transition: transform 0.3s ease;
}

.item-container:hover .icon-wrapper img {
    transform: scale(1.1);
}

.lms-ehs-banner-img {
    background-image: linear-gradient(to right, rgb(0 0 0 / 0%) 40%, rgb(255 255 255 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731915241/ehs-lms-banner-img.webp');
    background-size: cover;
    height: 600px;
    background-repeat: no-repeat;
    background-position-x: right;
}
@media only screen and (min-device-width: 768px) {
	.optimize-safety-slider .border-r-md {
		border-left:1px solid #858585
	}
}

.feature-box {
	display: flex;
	align-items: start;
	margin-bottom: 1rem;
}
@media only screen and (min-device-width: 1400px) {
	.feature-box {
		height: 118px!important;
	}
}
@media only screen and (max-device-width: 1200px) {
	.feature-box {
		height: 115px!important;
	}
}
@media only screen and (min-device-width: 992px) {
	.feature-box {
		border-bottom: 2px solid #dee2e6;
		height: 135px;
	}
	.feature-right {
		border-right: 2px solid #dee2e6;;
	}
}
.feature-box img {
	min-width: 70px;
    max-height: 55px;
	object-fit: none;
}
.feature-box h5 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}
.feature-box p {
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

/* General Section Styling */
.ehs-lms-solution {
    background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731924234/ehs-and-lms-solution-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Section Title */
.ehs-lms-solution h2 {
    font-size: 24px;
    color: #333;
    font-weight: bold;
    padding: 30px 0px;
}

/* Table Styling */
.ehs-lms-solution-table {
    width: 100%;
    border-collapse: collapse;
	border-top: 2px solid #dee2e6!important;
	border-bottom: 2px solid #dee2e6!important;
}

.ehs-lms-solution-table th {
	min-width: 360px;
}

.ehs-lms-solution-table th,
.ehs-lms-solution-table td {
	border: none!important;
    text-align: center;
    padding: 15px;
    font-size: 14px;
    border: 2px solid #dee2e6;
	vertical-align: middle;
}

/* Add borders for internal cells */
.ehs-lms-solution-table td:not(:last-child),
.ehs-lms-solution-table th:not(:last-child) {
    border-right: 2px solid #dee2e6!important;
}
.ehs-lms-solution-table tr:not(:last-child) td,
.ehs-lms-solution-table tr:not(:last-child) th {
    border-bottom: 2px solid #dee2e6!important;
}

.solution-header th {
    color: #000;
    font-weight: 800;
    font-size: 1.09rem;
	border-bottom: 2px solid #dee2e6!important;
}

.feature-icon img {
	width: 55px;
    height: 55px;
    background: #FECC07;
    padding: 8px;
    object-fit: none;
}

.ehs-lms-solution-table tbody tr:hover {
    background-color: #FECC07;
}

.ehs-lms-solution-table tbody tr:hover .feature-icon img {
    mix-blend-mode: difference;
}

@media (max-width: 768px) {
    .ehs-lms-solution-table td {
        font-size: 12px;
        padding: 10px;
    }
}

/* Parent Section Styling */
.ehs-lms-training-support {
    padding: 50px 0;
}

.ehs-lms-training-support h2 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 30px;
}

/* Card Styling */
.ehs-lms-training-support .ehs-card {
    padding: 20px;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease-in-out;
    margin-top: 40px;
	height: 185px;
}

/* Icon Styling */
.ehs-lms-training-support .ehs-card-icon {
	background-color: #FECC07;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    position: absolute;
    top: 0px;
}

.ehs-lms-training-support .ehs-card-icon img {
    max-width: 60%;
}

/* Card Body Styling */
.ehs-lms-training-support .ehs-card-body h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000;
}
.ehs-lms-training-support .ehs-card-body {
	margin-top: 35px;
}

.ehs-lms-training-support .ehs-card-body p {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.5;
}

.ehs-lms-sols {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1731938486/ehs-and-lms-solution-bg2.webp);
	background-size: 100% 100%;
	height: 250px;
}
.list-style-lower-roman{
	list-style: lower-roman;
}

section.ehs-lms-training-support .slick-dots {
    text-align: right;
	margin-top: 20px;
}
/* EHS/LMS */

/* program-overview */

.p-o-banner-img {
    background-image: linear-gradient(to right, rgb(0 0 0 / 0%) 40%, rgb(255 255 255 / 0%) 50%), url('https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1732347379/program-overview-banner.webp');
    background-size: cover;
    height: 600px;
    background-repeat: no-repeat;
    background-position-x: right;
}

.training-p-o-bg {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1732175471/circle-banner.webp);
	background-color: #efefef;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.why-choose-hazwoper .col-md-12>.row>.col-md-6 {
	border-bottom: 2px solid #e4e4e4;
	padding: 25px 0px;
}
.our-training-bg {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1732188378/our-services-bg.webp);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.our-training-bg .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 55px;
}
.our-training-bg .card-body {
    background: white;
	margin: 10px;
	display: flex;
	flex-direction:column;
	justify-content: space-between;
	align-items: start;
	min-height: 318px;
}

.our-training-bg .btn-link {
	color:#FE8207;

}

.get-start-today{
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/11/1732175471/circle-banner.webp);
	background-color: #efefef;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.get-start-today img {
	left: 20%;
	max-height: 230px
}

.rounded-5 {
	border-radius: 50px;
}

/* program-overview */

/* about us */

.about-us-banner {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/12/1733223209/about-us-banner.webp);
    background-size: cover;
    height: 600px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
}

/* about us */

/* why choose us */

.why-choose-us-banner {
	background-image: url(https://media.hazwoper-osha.com/wp-content/uploads/2024/12/1733226658/why-choose-us-banner.webp);
    background-size: cover;
    height: 600px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
}

.why-choose-us .card img {
    width: 70px;
    height: 70px;
    background: #FECC07;
    padding: 10px;
    left: 50px;
    object-fit: none;
}

.why-choose-us .card .card-body {
	margin-top: 35px;
}

.why-choose-us .custom-list {
    padding: 0;
    margin: 0;
}

.why-choose-us .custom-list li {
    list-style: none;
	padding: 0px;
    padding-left: 1.5rem;
    position: relative;
}

.why-choose-us .custom-list li::before {
    content: '\2022';
    color: #ffc107;
    position: absolute;
    left: 0;
    top: -15px;
    font-size: 30px;
}
@media (min-width: 1399px) {
	.ehs-lms-sols .col-md-5.position-relative.d-md-block.d-none img {
		width: 75%;
	}
}
/* why choose us */


/* webinar */

.webinar-banner  {
	background-image: linear-gradient(120deg, rgb(0 0 0 / 60%) 45%, rgb(255 255 255 / 0%) 100%), url(https://media.hazwoper-osha.com/wp-content/uploads/2025/02/1739259243/webinar-banner.webp);
    background-size: cover;
    height: 600px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: top;
}

#course-details-section .icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0px 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
    position: relative;
}

#course-details-section .icon-box img {
	width: 30px;
    height: 35px;
    object-fit: contain;
    position: absolute;
}

#course-details-section .course-detail-card {
	height: 100%;
	padding: 10px;
}

.how-its-work .works-box {
    padding: 30px 30px 15px 30px;
}

#who-should-attend {  
    background-image: url('https://media.hazwoper-osha.com/wp-content/uploads/2025/02/1739180533/who-should-attend-bg.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    color: #333;
}  

#typeForm .row .col-lg-3 .number-border-left {
    height: 70%;
    border-left: 3px dashed #c1c1c1;
    position: absolute;
    left: 32px;
    z-index: 0;
}

#typeForm .points-number {
    z-index: 2;
}

.trainer-section {
    background-color: #e9e9e9;
}

.trainer-section .webinar-testimonial-slider {
    max-width: 900px; /* Adjust for proper width */
    margin: auto;
}

.trainer-section .slick-list {
    height: auto !important; /* Ensure it adapts */
}

.trainer-section .testimonial-item {
    background: #000;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.trainer-section .pb-1 {
    padding: 10px;
}

.trainer-section .trainer-image img {
    max-width: 100%;
    border-radius: 4px;
    border: 4px solid #FFC107;
    box-shadow: 3px 3px 5px 2px #bfbfbf;
}

.trainer-section .trainer-details {
    padding: 20px;
}

.trainer-section .stars {
    color: #ffc107;
}

.trainer-section .webinar-testimonial-slider .slick-dots li.slick-active button:before {
	background: #ffd400;
	transition: 0.5s;
	height: 6px;
	border-radius: 5px;
}

.trainer-section .webinar-testimonial-slider .slick-dots li button:before {
	background: #bbbbbb;
	height: 6px;
	border-radius: 5px;
}

/* webinar */
/* ===============================================
   PRIVATE LABEL TRAINING PAGE - BOOTSTRAP VERSION
   =============================================== */
html {
  scroll-behavior: smooth;
}

/* =============== GLOBAL SCOPED STYLES =============== */
html, body {
  overflow-x: hidden !important;
}

.private-label-pg,
.scorm-packages-pg {
  --primary: #0f172a;
  --primary-foreground: #ffffff;
  --accent: #fbbf24;
  --accent-foreground: #000000;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --destructive: #ef4444;
  --theme: #fbbf24;

  font-family: 'Inter', sans-serif;
  color: var(--slate-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-theme {
  color: var(--theme)!important;
}

.text-success {
  color: var(--emerald-600)!important;
}

.private-label-pg *,
.scorm-packages-pg *,
.private-label-pg *::before,
.scorm-packages-pg *::before,
.private-label-pg *::after,
.scorm-packages-pg *::after {
  box-sizing: border-box;
}

.private-label-pg h1, .scorm-packages-pg h1,
.private-label-pg h2, .scorm-packages-pg h2,
.private-label-pg h3, .scorm-packages-pg h3,
.private-label-pg h4, .scorm-packages-pg h4,
.private-label-pg h5, .scorm-packages-pg h5,
.private-label-pg h6, .scorm-packages-pg h6 {
  font-family: 'Mulish', sans-serif;
  font-weight: 700!important;
  letter-spacing: -0.02em;
  line-height: 1.1;
}





/* Scroll Animation Classes */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px); /* Reduced distance for smoother feel */
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform;
  
  /* Hardware Acceleration & Anti-aliasing */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

.scroll-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Drop Animation (Top to Bottom) */
.scroll-animate-drop {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.scroll-animate-drop.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Right-to-Left Animation (Specific Request) */
.scroll-animate-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.scroll-animate-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Left-to-Right Animation */
.scroll-animate-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.scroll-animate-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.private-label-pg img,
.scorm-packages-pg img {
  max-width: 100%;
  height: auto;
  display: block;
}

.list-unstyled li {
    padding: 5px 0;
}

/* =============== FIXED SECTION NAVIGATOR =============== */
/* =============== FIXED SECTION NAVIGATOR =============== */
.section-navigator {
  position: fixed;
  bottom: 30px;
  right: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--slate-200);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: translateX(0%);
  opacity: 0;
  pointer-events: none; /* Prevent clicks when hidden */
}

.section-navigator.visible {
  opacity: 1;
  pointer-events: auto; /* Enable clicks when visible */
}

.nav-icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--slate-500);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: visible;
  padding: 0;
}

.nav-icon:hover {
  background: var(--slate-50);
  color: var(--slate-900);
}

.nav-icon.active {
  background: #fbbf2420; /* Light transparent yellow */
  color: var(--brand-yellow); /* Same as theme yellow */
  box-shadow: none;
}


.nav-icon svg,
.nav-icon i {
  width: 20px;
  height: 20px;
  min-width: 20px;
  stroke-width: 2;
  font-size: 18px;
  display: contents;
}

.nav-label {
  position: absolute;
  right: 50px; /* Position to the left of the icon */
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}

/* Arrow for tooltip */
.nav-label::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    border-width: 4px 0 4px 4px;
    border-style: solid;
    border-color: transparent transparent transparent #1e293b;
}

.nav-icon:hover .nav-label,
.nav-icon.active .nav-label {
  opacity: 1;
  transform: translateY(-50%) translateX(-5px);
  filter: drop-shadow(1px 1px 1px #ffefae);
}

.scroll-to-top {
  border-top: 2px solid var(--slate-200);
  margin-top: 8px;
  padding-top: 18px !important;
  animation: bounceUpDown 1.5s ease-in-out infinite;
}

@keyframes bounceUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Mobile Navigator */
/* Mobile Navigator - Hidden as per request */
@media (max-width: 768px) {
  .section-navigator {
    display: none !important;
  }
}

/* =============== UTILITY CLASSES =============== */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(135deg, rgb(255, 204, 0), rgb(249, 169, 31));
}

.text-accent {
  color: var(--accent) !important;
}

.object-cover {
  object-fit: cover;
}

.accent-line {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent);
  z-index: 10;
}

.accent-line-bottom {
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent);
  z-index: 10;
}

/* =============== SECTION LAYOUTS =============== */
.section-white {
  padding: 60px 0;
  background: #ffffff;
}

.section-gray {
  padding: 60px 0;
  background: var(--slate-50);
}

.section-dark {
  padding: 60px 0;
  background: var(--slate-950);
  position: relative;
  background-image: radial-gradient(circle at top right, #1e293b 0%, #0f172a 100%);
}

@media (max-width: 768px) {
  .section-white, .section-gray, .section-dark {
    padding: 30px 0;
  }
}

/* =============== SECTION HEADERS =============== */
.section-header {
  margin-bottom: 60px;
}

.section-badge {
    display: inline-block;
    color: #ffb300;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
    background: #ffb3000f;
    border: 1px solid #ffb30030;
    border-radius: 15px;
    padding: 1px 10px;
    line-height: 1.8;
}

.section-badge-green {
    display: inline-block;
    color: var(--emerald-600);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
    background: var(--emerald-100);
    border: 1px solid var(--emerald-500);
    border-radius: 15px;
    padding: 1px 10px;
}

.section-title {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 800;
  margin-bottom: 20px;
  color: var(--slate-900);
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--slate-500);
  max-width: 700px;
  margin: 0 auto;
}

.section-text {
  font-size: 1rem;
  color: var(--slate-600);
  line-height: 1.7;
}

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

  .section-subtitle {
    font-size: 1rem;
  }
}

/* =============== BUTTONS (PLOD THEME) =============== */
.private-label-pg .btn-plod,
.scorm-packages-pg .btn-plod {
  font-family: 'Mulish', sans-serif;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: normal;
  text-transform: none;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-plod:active {
  transform: translateY(0) scale(0.98);
}

.private-label-pg .btn-plod-primary,
.scorm-packages-pg .btn-plod-primary {
  background: #fbbf24;
  color: #000000;
  border-color: #fbbf24;
  box-shadow: none; 
}

.private-label-pg .btn-plod-primary:hover,
.scorm-packages-pg .btn-plod-primary:hover {
  background: #ffd700;
  border-color: #ffd700;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 224, 0, 0.2);
}

.text-warning {
    color: var(--accent) !important;
}

/* Theme 2: Glass (Talk to Sales style) */
.private-label-pg .btn-plod-glass,
.scorm-packages-pg .btn-plod-glass {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  backdrop-filter: blur(4px);
}

.private-label-pg .btn-plod-glass:hover,
.scorm-packages-pg .btn-plod-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

.private-label-pg .btn-plod-outline,
.scorm-packages-pg .btn-plod-outline {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.private-label-pg .btn-plod-outline:hover,
.scorm-packages-pg .btn-plod-outline:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  transform: translateY(-2px);
}

.private-label-pg .btn-plod-dark,
.scorm-packages-pg .btn-plod-dark {
  background: transparent;
  border: 1px solid var(--slate-900);
  color: var(--slate-900);
}

.private-label-pg .btn-plod-dark:hover,
.scorm-packages-pg .btn-plod-dark:hover {
  background: var(--slate-900);
  color: #ffffff;
}

/* Icon sizing */
.btn-plod i, .btn-plod svg {
  font-size: 1.1em;
}

/* =============== HERO SECTION (#hero) =============== */
.hero-section {
  /* min-height: 100vh; */
  display: flex;
  align-items: center;
  padding: 30px 0 80px;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #000000d4, rgb(15 23 42 / 74%), rgba(15, 23, 42, 0.9));
  z-index: 1;
}

.hero-section .container {
  position: relative;
  z-index: 2;
  padding-top: 40px;
  padding-bottom: 40px;
}

.badge-custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  background: rgba(255, 204, 0, 0.2);
  border: 1px solid rgba(255, 204, 0, 0.3);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.badge-text {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.hero-title {
  font-size: clamp(2rem, 5vw, 4rem)!important;
  font-weight: 800!important;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
}

.hero-description {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  max-width: 600px;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
}

.feature-icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
}

.hero-image-wrapper {
  position: relative;
}

.hero-main-image {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-badge {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--slate-200);
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 204, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.stat-icon svg,
.stat-icon i {
  width: 24px;
  height: 24px;
  font-size: 20px;
}

.stat-number {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
}

.stat-label {
  font-size: 12px;
  color: var(--slate-500);
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}

.scroll-indicator:hover {
  color: rgba(255, 255, 255, 0.9);
}

@keyframes bounceArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes bounceArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* Ensure Scroll Indicator is consistently visible */
.scroll-indicator {
  position: absolute;
  bottom: 15px; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.3s ease;
}

.scroll-indicator.hero-fixed {
    position: fixed;
    bottom: 0;
    padding-bottom: 15px; /* Adjusted padding */
}

.scroll-indicator .scroll-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  opacity: 0.8;
  margin-bottom: 5px;
  display: block;
}

.scroll-indicator i {
  font-size: 18px;
  opacity: 0.8;
  animation: bounceArrow 2s infinite ease-in-out;
}

@media (max-width: 768px) {
  .hero-section {
    /* min-height: 100dvh; */ /* Enforce full screen on mobile too */
    padding: 100px 0 80px; /* Increased bottom padding for scroll indicator */
  }

  .hero-features {
    justify-content: center;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .hero-buttons a {
    width: 100%;
    justify-content: center;
  }
}

/* =============== PROBLEM SECTION (#problem) =============== */
.card-problem {
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--slate-50);
}

.card-problem:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transform: translateY(-5px);
  border-color: #ff5f56;
}

.card-problem:hover .card-icon-danger {
    background: #ffe6e5;
}

.card-icon-danger {
  width: 48px;
  height: 48px;
  background: #fff1f1;
  color: #ff5f56;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  font-size: 24px;
}

.card-title {
  font-family: 'Mulish', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 15px;
  line-height: 1.4;
}

.card-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* =============== HOW IT WORKS SECTION =============== */
.step-row {
  position: relative;
  justify-content: center;
  padding: 40px 0;
}

.journey-line-svg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

.journey-line-path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-line-path.visible {
  stroke-dashoffset: 0;
}

.step-card {
  text-align: center;
  position: relative;
  z-index: 2;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: transparent;
  padding: 20px 10px;
  opacity: 0; /* Hidden initially for scroll animation */
  transform: translateY(0); /* Reset for JS control */
}

.step-icon-wrapper {
  width: 85px;
  height: 85px;
  background: #ffefaed1;
  border: 2px solid rgba(255, 204, 0, 0.3);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 5;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.step-card:hover .step-icon-wrapper {
  color: #00aa3e;
  transform: scale(1.1) rotate(0deg); /* Slight scale, no rotation */
  border-color: var(--accent);
}

.step-number {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--accent); /* Number stays yellow */
  color: var(--accent-foreground);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 6;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.step-card:hover .step-number {
    background: var(--accent);
    color: var(--accent-foreground);
	transform: scale(1)
}

.step-icon-wrapper svg,
.step-icon-wrapper i {
  width: 32px;
  height: 32px;
  font-size: 28px;
}

.step-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.step-content {
    margin-top: 1rem;
	padding: 5px;
	border-radius: 10px;
	background-color: white;
	border: 1px solid #e2e8f0;
}

.step-card:hover .step-content {
	border-color: var(--accent);
}

/* Timeline Custom Styles */
.timeline-progress-wrapper {
  position: relative;
  height: 10px;
  background: var(--slate-200);
  border-radius: 5px;
  margin-bottom: 50px;
}

.timeline-progress-bar {
  position: absolute;
  height: 100%;
  background: linear-gradient(to right, #ffce13, #10b981);
  border-radius: 5px;
  transition: width 1s ease-in-out;
}

/* =============== LEGACY FOOTER REMOVED =============== */

/* Transparent Icons Update */

.card-icon i,
.timeline-icon i,
.step-final .step-icon i,
.compliance-icon, .customer-icon-new i{
    font-size: 1.5rem; /* Ensure visibility */
}

.browser-chrome {
  height: 32px;
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.browser-dots {
  display: flex;
  gap: 6px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-red { background: #ef4444; }
.dot-yellow { background: #ffce13; }
.dot-green { background: #10b981; }

.color-picker {
  position: absolute;
  top: -24px;
  left: -24px;
  background: #ffffff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--slate-100);
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.color-swatch:hover {
  transform: scale(1.1);
}

.color-teal {
  background: #0d9488;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
}

.color-indigo { background: #4f46e5; }
.color-rose { background: #e11d48; }

.white-label-badge {
  position: absolute;
  bottom: -24px;
  right: -24px;
  background: var(--slate-900);
  color: #ffffff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  align-items: center;
  gap: 12px;
}

.badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-foreground);
}

.badge-icon svg,
.badge-icon i {
  width: 20px;
  height: 20px;
  font-size: 16px;
}

.badge-content {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.badge-subtitle {
  font-size: 10px;
  opacity: 0.7;
  font-weight: 400;
}

/* =============== FEATURES SECTION (#features) =============== */
.card-feature {
  background: #ffffff;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 100%;
}

.card-feature:hover {
  box-shadow: 0 20px 40px rgba(255, 204, 0, 0.1);
  transform: translateY(-10px);
  border-color: #ffce13;
  background: #ffffff;
}

.card-feature:hover .card-icon-accent {
    background: #fff8d6;
    transform: scale(1.05);
}

.card-feature:hover .card-icon-accent i {
    transform: scale(1.15);
}

.card-icon-accent {
  width: 56px;
  height: 56px;
  background: #fffbeb;
  color: #ffce13;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  font-size: 26px;
  transition: all 0.3s ease;
}

.card-icon-accent i {
  transition: transform 0.3s ease;
}

/* =============== COMPARISON SECTION (#why-hazwoper) =============== */
.comp-tab {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #f1f5f9;
  cursor: pointer;
  color: #000;
  padding: 7px 18px;
  transform: scale(0.92);
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.comp-tab.btn-dark.active {
  background: #000;
  color: #fff;
  transform: scale(1.05);
  border-color: #000;
  box-shadow: none !important;
}

.comp-tab:not(.btn-dark):hover {
  transform: scale(0.97);
}


#compName {
  width: 120px;
}

.comparison-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  background: rgba(255, 204, 0, 0.15);
  border: 1px solid rgba(255, 204, 0, 0.25);
}

.comparison-badge svg,
.comparison-badge i {
  width: 16px;
  height: 16px;
  font-size: 14px;
  color: var(--accent);
}

.comparison-badge span {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.comparison-card {
  background: #ffffff;
  padding: 50px;
  border-radius: 24px;
  border: 1px solid var(--slate-100);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.advantage-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 24px;
}

.advantage-list li {
  display: flex;
  gap: 20px;
}

.advantage-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: var(--emerald-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--emerald-600);
  margin-top: 2px;
}

.advantage-icon svg,
.advantage-icon i {
  width: 16px;
  height: 16px;
  font-size: 12px;
}

.advantage-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.advantage-title {
  font-weight: 700;
  color: var(--slate-800);
  display: block;
}

.advantage-text {
  font-size: 0.875rem;
  color: var(--slate-500);
  display: block;
}

.comparison-table-wrapper {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid var(--slate-200);
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.comparison-header {
  padding: 24px;
  border-bottom: 1px solid var(--slate-100);
  background: rgba(248, 250, 252, 0.5);
}

.comparison-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 800;
  color: var(--slate-400);
  text-align: center;
  margin-bottom: 16px;
}

.comparison-tabs {
  display: flex;
  gap: 8px;
  padding: 4px;
  background: var(--slate-100);
  border-radius: 12px;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--slate-500);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.5);
}

.tab-btn.active {
  background: #ffffff;
  color: var(--slate-900);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#comparisonTable .comparison-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  font-size: 12px;
  border-bottom: 1px solid var(--slate-100);
}

#comparisonTable .comparison-row:last-child {
  border-bottom: none;
}

#comparisonTable .comparison-row:nth-child(even) {
  background: rgba(248, 250, 252, 0.5);
}

#comparisonTable .comparison-cell {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#comparisonTable .comparison-cell:first-child {
  justify-content: flex-start;
  font-weight: 500;
  color: var(--slate-700);
}

#comparisonTable .comparison-cell:nth-child(2) {
  background: rgba(255, 204, 0, 0.05);
}

#comparisonTable svg,
#comparisonTable i {
  width: 16px;
  height: 16px;
  font-size: 14px;
}

/* =============== TIMELINE SECTION (#timeline) =============== */
.timeline-progress {
  max-width: 800px;
  margin: 0 auto 60px;
  position: relative;
}

.progress-bar-custom {
  height: 17px;
  background: var(--slate-100);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--accent), var(--emerald-500));
  width: 0;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3);
}

.progress-fill.active {
    animation: fillProgress 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fillProgress {
    from { width: 0; }
    to { width: 100%; }
}

.progress-marker {
  position: absolute;
  top: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.progress-start { left: 0; }
.progress-middle { left: 50%; transform: translateX(-50%); }
.progress-end {
  right: 0;
  width: 24px;
  height: 24px;
  top: -4px;
  background: var(--emerald-500);
  display: flex;
  align-items: center;
  justify-content: end;
}

.progress-end svg,
.progress-end i {
  width: 12px;
  height: 12px;
  font-size: 10px;
  color: #ffffff;
}

.timeline-card {
  background: #ffffff;
  padding: 40px;
  border-radius: 20px;
  border: 1px solid var(--slate-100);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 100%;
}

.timeline-card:hover {
  border-color: rgba(255, 204, 0, 0.2);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.timeline-card-success:hover {
  border-color: rgba(16, 185, 129, 0.2);
}

.timeline-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.timeline-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-icon svg,
.timeline-icon i {
  width: 24px;
  height: 24px;
  font-size: 20px;
}

.timeline-icon-accent {
  background: rgba(255, 204, 0, 0.1);
  color: var(--accent);
}

.timeline-icon-success {
  background: var(--emerald-50);
  color: var(--emerald-600);
}

.timeline-badge {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}

.timeline-badge-success {
  color: var(--emerald-600);
}

.timeline-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
}

.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.timeline-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--slate-600);
}

.check-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  color: var(--emerald-500);
  font-size: 14px;
}

/* =============== TRUST SECTION (#trust) =============== */
.stat-card {
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
  line-height: 1;
}

.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--slate-400);
}

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

/* =============== PRICING SECTION (#pricing) =============== */
.pricing-card {
  background: #ffffff;
  padding: 50px;
  border-radius: 24px;
  border: 1px solid var(--slate-500);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.pricing-featured {
  background: var(--slate-900);
  color: #ffffff;
  border: 2px solid rgba(255, 204, 0, 0.2);
}

.pricing-featured:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 8px rgba(255, 204, 0, 0.1), 0 20px 60px rgba(0, 0, 0, 0.2);
}

.pricing-badge {
  position: absolute;
  top: -16px;
  left: 40px;
  background: var(--accent);
  color: var(--accent-foreground);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pricing-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.pricing-featured .pricing-title {
  color: #ffffff;
}

.pricing-description {
  font-size: 0.875rem;
  color: var(--slate-500);
  margin-bottom: 32px;
  max-width: 400px;
}

.pricing-featured .pricing-description {
  color: var(--slate-400);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  display: grid;
  gap: 16px;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
}

.pricing-featured .pricing-features li {
  color: rgba(255, 255, 255, 0.9);
}

.pricing-features svg,
.pricing-features i {
  width: 20px;
  height: 20px;
  min-width: 20px;
  color: var(--accent);
  font-size: 16px;
}

.pricing-featured .pricing-features svg {
  color: var(--accent);
}

/* =============== PRICING ESTIMATOR (#pricing-estimator) =============== */
.estimator-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--slate-200);
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
}

.estimator-controls {
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.control-group label {
  color: var(--slate-900);
  font-size: 0.95rem;
}

.custom-range {
  width: 100%;
  height: 8px;
  border-radius: 50px;
  background: var(--slate-100);
  outline: none;
  appearance: none;
  cursor: pointer;
}

.custom-range::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid var(--slate-900);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.custom-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4);
}

.custom-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid var(--slate-900);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.estimator-result {
  background: var(--slate-900);
  color: #ffffff;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.result-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--slate-400);
  margin-bottom: 16px;
}

.result-value {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 16px;
  line-height: 1;
}

.result-note {
  font-size: 0.875rem;
  color: var(--slate-500);
  font-style: italic;
  margin: 0;
}

@media (max-width: 768px) {
  .estimator-controls, .estimator-result {
    padding: 30px;
  }
}

/* =============== IDEAL CUSTOMER SECTION (#ideal-customer) =============== */
.customer-card {
  background: #ffffff;
  padding: 32px 24px;
  border-radius: 20px;
  border: 1px solid var(--slate-100);
  text-align: center;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.customer-card:hover {
  border-color: var(--accent);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.customer-number {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 12px;
  background: #fbbf2415;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
}

.customer-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
}

/* =============== FAQ SECTION (#faq) =============== */
.faq-wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 5px;
}

.faq-item {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--slate-200);
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.faq-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
  color: var(--slate-900);
  font-size: 1rem;
  transition: background 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.faq-question:hover,
.faq-question:hover i {
  background: var(--slate-50);
  color: var(--accent);
}

.faq-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  color: var(--slate-400);
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 18px;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 0 24px;
  color: var(--slate-600);
  font-size: 0.875rem;
  line-height: 1.7;
  border-top: 1px solid var(--slate-100);
}

.faq-item.active .faq-answer {
  max-height: 500px;
  padding: 24px;
}

/* =============== CTA SECTION (#demo) =============== */
.cta-section {
  padding: 100px 0;
  position: relative;
  background: var(--slate-950);
  background-image: radial-gradient(circle at top right, #1e293b 0%, #0f172a 100%);
  overflow: hidden;
}

.cta-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: radial-gradient(circle at center, rgba(255, 224, 0, 0.5), transparent);
}

.cta-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
}

.cta-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 40px;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.cta-note {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 800;
  color: var(--slate-500);
  margin-top: 32px;
}

.footer-bg {
	margin-top: 0px!important;
}

@media (max-width: 768px) {
  .cta-section {
    padding: 60px 0;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .cta-buttons a {
    width: 100%;
    justify-content: center;
  }
}

/* =============== SMOOTH SCROLLING =============== */
html {
  scroll-behavior: smooth;
}

/* =============== RESPONSIVE UTILITIES =============== */
@media (max-width: 992px) {
  .section-header {
    margin-bottom: 40px;
  }

  .comparison-card {
    padding: 30px;
  }

  .timeline-card {
    padding: 30px;
  }

  .pricing-card {
    padding: 40px 30px;
  }
}

/* =============== COMPLIANCE FEATURES (TRUST SECTION) =============== */
/* =============== COMPLIANCE FEATURES — scorm-packages-pg variant =============== */
.scorm-packages-pg #compliance {
    background: #fff;
    padding: 100px 0;
}

/* Default (Light) Compliance Card - Used in #compliance (section-white) */
/* [Note: SCORM specific card styles moved further down for proper scoping and override priority] */

.scorm-packages-pg .compliance-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
    font-family: 'Mulish', sans-serif !important;
}

.section-dark .compliance-title {
    color: #ffffff !important;
}

.scorm-packages-pg .compliance-desc {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

.section-dark .compliance-desc {
    color: rgba(255, 255, 255, 0.5) !important;
}

.stat-item-simple {
  text-align: center;
}

.stat-item-simple .stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 5px;
}

.stat-item-simple .stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
}

/* =============== NEW REVENUE ESTIMATOR STYLES =============== */
.estimator-wrapper {
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #e5e7eb;
}

/* Model Selector Cards */
.model-selector-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 100%;
    position: relative;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}

.model-selector-card:hover {
    border-color: #cbd5e1;
}

.model-selector-card.active {
    border-color: #facc15;
    background-color: #fffbeb;
    box-shadow: 0 0 0 2px #facc15;
}

.model-check {
    position: absolute;
    top: 24px;
    right: 24px;
    color: #ca8a04;
    opacity: 0;
    transition: opacity 0.2s;
}

.model-selector-card.active .model-check {
    opacity: 1;
}

/* Custom Range & Inputs */
.custom-range {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
    cursor: pointer;
}

.split-btn {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    width: 100%;
    transition: all 0.2s;
}

.split-btn:hover {
    background: #f8fafc;
}

.split-btn.active {
    background: #fff;
    border-color: #facc15;
    color: #0f172a;
    box-shadow: 0 0 0 1px #facc15;
}

.result-card-value {
    /* Responsive Font Sizing */
    font-size: clamp(1rem, 10cqi, 1.8rem);
    font-weight: 800;
    color: #0f172a;
    font-family: 'Mulish', sans-serif;
    
    /* Overflow Handling */
    overflow-wrap: break-word; /* Ensure wrapping */
    word-break: break-word;   /* Break long numbers if needed */
    line-height: 1.2;
    width: 100%;
}

/* Enable container queries for the card */
.result-card {
    container-type: inline-size;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px; /* Reduced padding for more space */
    text-align: center;
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.result-card-value.highlight {
    color: #fbbf24;
}
.our-monthly-share .result-card-value,
.our-monthly-share .result-card-label {
  color: #64748b;
}
.your-quarterly-share {
  transform: scale(1.05);  
}
.your-quarterly-share .result-card {
  background: #fbbf24;
}

.estimator-warning {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px;
    color: #b91c1c;
    font-size: 0.875rem;
    margin-top: 24px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.wholesale-banner {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 12px 20px;
    color: #92400e;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-icon {
    color: #fbbf24;
}

/* =============== STEP SLIDE ANIMATIONS =============== */
.step-2, .step-3 {
    position: relative;
    will-change: transform, opacity;
}

/* Slide from Left to Right (Step 2) */
@keyframes slideFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    30% {
        opacity: 0.4;
        /* transform: translateX(-35px); */
    }
    70% {
        opacity: 0.85;
        /* transform: translateX(-10px); */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide from Right to Left (Step 3) */
@keyframes slideFromRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    30% {
        opacity: 0.4;
        /* transform: translateX(35px); */
    }
    70% {
        opacity: 0.85;
        /* transform: translateX(10px); */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Step 2: Always slides from left */
.step-2.slide-in-left {
    animation: slideFromLeft 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Step 3: Always slides from right with slight delay for stagger effect */
.step-3.slide-in-right {
    animation: slideFromRight 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* Keep these for backward compatibility but they won't be used */
.step-2.slide-in-right {
    animation: slideFromRight 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.step-3.slide-in-left {
    animation: slideFromLeft 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* =============== COMPARISON TABLE SCROLL ANIMATION =============== */
.comparison-table-col {
    opacity: 0;
    transform: translateX(60px);
    transition: none;
}

.comparison-table-col.animate-in {
    animation: comparisonSlideIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes comparisonSlideIn {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    30% {
        opacity: 0.3;
        transform: translateX(40px);
    }
    60% {
        opacity: 0.7;
        transform: translateX(15px);
    }
    90% {
        opacity: 0.95;
        transform: translateX(3px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =============== IDEAL CUSTOMER SECTION (NEW) =============== */
.customer-card-new {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px 24px;
    height: 100%;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-height: 115px;
}

.customer-card-new:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(255, 224, 0, 0.1);
	border-color: #fbbf24;
    background: #fffdf5;
}

.customer-card-new:hover .customer-icon-new {
    background: #fff8d6;
    transform: scale(1.1);
}

.customer-card-new:hover .customer-icon-new i {
    transform: scale(1.15);
}

.customer-icon-new {
    font-size: 26px;
    color: #fbbf24;
    background: #fbbf2415;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.customer-icon-new i {
    transition: transform 0.3s ease;
}

/* Specific icon overrides for different colors/styles if needed, currently uniform yellow as per image */

.customer-title-new {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.customer-note-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 20px 30px;
    text-align: center;
    margin: 50px auto 0;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 500;
    width: fit-content;
}

.customer-note-box strong {
    color: #0f172a;
    font-weight: 700;
}



/* =============== FOOTER CTA (#requestADemo) =============== */
.cta-footer-dark {
    padding: 100px 0;
    background: #0f172a;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cta-footer-dark::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.cta-footer-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.cta-footer-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #94a3b8;
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-footer-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 48px;
    flex-wrap: wrap;
}

.cta-footer-links span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 500;
}

.cta-footer-links i {
    color: #ffce13;
    font-size: 1rem;
}

.scorm-packages-pg .btn-yellow-cta {
    background: #fbbf24;
    color: #000;
    border: none;
    box-shadow: 0 10px 30px rgba(255, 224, 0, 0.3);
    padding: 16px 36px;
    font-weight: 800;
    border-radius: 50px;
}

.scorm-packages-pg .btn-yellow-cta:hover {
    background: #f59e0b;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 206, 19, 0.4);
    color: #000;
}

.scorm-packages-pg .btn-glass-cta {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 16px 36px;
    font-weight: 600;
    border-radius: 50px;
}

.scorm-packages-pg .btn-glass-cta:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    color: #ffffff;
}

#faq {
    padding: 100px 0;
    position: relative;
    background: #f8fafc;
}

.bg-muted\/20 {
    background-color: rgba(241, 245, 249, 0.5);
}

.text-foreground {
    color: #0f172a;
}

.text-muted-foreground {
    color: #64748b;
}

.border-border {
    border-color: #e2e8f0;
}

.bg-card {
    background-color: #ffffff;
}

.text-accent {
    color: #fbbf24;
}

.bg-accent {
    background-color: #fbbf24;
}

.text-accent-foreground {
    color: #000;
}

.focus\:border-accent:focus {
    border-color: #fbbf24 !important;
}

.focus\:ring-accent\/50:focus {
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.25) !important;
}

.container-narrow {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.faq-search-wrapper {
    position: relative;
    margin-bottom: 24px;
}

.faq-search-wrapper i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1rem;
}

.faq-search-wrapper input {
    padding: 14px 20px 14px 52px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    width: 100%;
    font-size: 0.9rem;
    transition: all 0.3s;
    background: #fff;
    color: #1e293b;
}

.faq-search-wrapper input::placeholder {
    color: #94a3b8;
}

.faq-search-wrapper input:focus {
    border-color: #fbbf24;
    box-shadow: 0 0 0 4px rgba(255, 224, 0, 0.1);
    outline: none;
}

.faq-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.faq-filter-pill {
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
}

.faq-filter-pill:hover {
    border-color: rgba(255, 224, 0, 0.4);
    color: #0f172a;
}

.faq-filter-pill.active {
    background: #fbbf24;
    color: #000;
    border-color: #fbbf24;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25);
}

.faq-item-new {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item-new:hover {
    border-color: rgba(255, 224, 0, 0.4);
}

.faq-item-new.is-open {
    border-color: rgba(255, 224, 0, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.faq-trigger {
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    gap: 20px;
	position: relative;
}

.faq-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.faq-category-tag {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fbbf24;
    flex-shrink: 0;
    width: 90px;
    text-shadow: 0px 0px 17px #fbbe24d5;
    position: absolute;
    top: 15px;
}

.faq-question-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    transition: color 0.25s;
    padding-left: 100px;
}

.faq-trigger:hover .faq-question-text,
.faq-trigger:hover .faq-category-tag {
    text-decoration: underline;
    text-decoration-color: #fbbf24c7;
}

.faq-chevron {
    font-size: 0.8rem;
    color: #94a3b8;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item-new.is-open .faq-chevron {
    transform: rotate(180deg);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item-new.is-open .faq-content {
    max-height: 800px;
}

.faq-body {
    padding: 0 24px 24px 126px; /* Align with question text - Adjust based on width of tag + gap */
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .faq-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .faq-body {
        padding-left: 24px;
    }
}

.faq-show-more {
    margin-top: 40px;
    text-align: center;
}


/* =============== SOLUTION MOCKUP SECTION =============== */
.solution-mockup-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: visible; /* Allow floating elements to overflow if needed, but usually absolute within helps */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.mock-browser-header {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 16px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.browser-dots span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.mock-interface {
    display: flex;
    height: 320px;
    background: #fff;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.mock-sidebar {
    width: 34%;
    padding: 5px;
    color: #fff;
    display: flex;
    flex-direction: column;
    transition: background-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@media (max-width: 524px) {
    .mock-sidebar {
        width: 120px;
    }
}

.mock-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

.mock-nav-item.active {
    background: rgba(255,255,255,0.2);
    font-weight: 600;
}

.mock-nav-item.completed {
    background: rgba(255,255,255,0.1);
}

.mock-main-area {
    flex: 1;
    background: #1e293b; /* Dark slate for video area */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mock-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: background-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.mock-play-btn:hover {
    transform: scale(1.1);
}

.mock-video-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.mock-progress-bar {
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    width: 100%;
    overflow: hidden;
}

.mock-progress-fill {
    height: 100%;
    width: 35%;
    background-color: inherit; /* Will inherit variable or be set inline */
    transition: background-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =============== HERO SECTION =============== */
.hero-section {
    /* min-height: 85vh; */
    background: #0f172a;
    position: relative;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.8) 50%, rgba(15, 23, 42, 0.4) 100%);
    z-index: 2;
}

/* Ensure content is above overlay */
.hero-section > .container-xxl {
    position: relative;
    z-index: 3;
}

.hero-title {
    font-size: 3.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

@media (min-width: 992px) {
    .hero-title {
        font-size: 4.5rem;
    }
}

.backdrop-blur {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.fw-900 {
    font-weight: 900;
}

/* Force Bootstrap bg-warning to match theme accent for badges */
.bg-warning {
    background-color: var(--accent) !important;
    color: #000 !important;
}

/* Trusted By Badge Text */
.text-warning.text-uppercase {
    color: var(--accent) !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
}

.hero-image-card {
    position: relative;
    transition: transform 0.3s ease;
}

.hero-image-card:hover {
    transform: translateY(-5px);
}

.animate-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

.tracking-widest {
    letter-spacing: 0.2em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.x-small {
    font-size: 0.75rem; /* 12px */
}

/* Floating Widgets */
.brand-picker-widget {
    position: absolute;
    top: -58px;
    left: -20px;
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 20;
    width: 200px;
    animation: float 6s ease-in-out infinite;
}

.color-dot-container {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent; /* default border */
    position: relative;
    transition: transform 0.2s;
}

.color-dot:hover {
    transform: scale(1.1);
}

.color-dot.active {
    border-color: #cbd5e1;
    transform: scale(1.1);
}

.color-dot.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.scorm-packages-pg .white-label-badge-widget {
    position: absolute;
    bottom: 38px;
    right: -30px;
    background: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 20;
    animation: floatDelayed 6s ease-in-out infinite;
}

.private-label-pg .white-label-badge-widget {
    position: absolute;
    bottom: -55px;
    right: -30px;
    background: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 20;
    animation: floatDelayed 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes floatDelayed {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Mobile Optimizations - 2 Cards Row */
@media (max-width: 768px) {
    /* General Grid Reset for Specific Sections */
    #problem .row,
    #features .row,
    #trust .row,
    #pricing .row,
    #ideal-customer .row {
        display: flex;
        flex-wrap: wrap;
        margin-left: -5px !important;
        margin-right: -5px !important;
        /* Reduce gap */
        gap: 0 !important;
    }

    #problem .col-md-6, #problem .col-lg-4,
    #features .col-md-6, #features .col-lg-4,
    #trust .col-md-6, #trust .col-lg-4,
    #pricing .col-lg-5,
    #ideal-customer .col-md-6, #ideal-customer .col-lg-3 {
        width: 50% !important;
        max-width: 50% !important;
        padding: 0 5px !important; /* Visual gap */
        margin-bottom: 10px !important;
    }

    /* Card Compact Styles for Mobile */
    .card-problem, 
    .card-feature, 
    .compliance-feature-card,
    .pricing-card,
    .customer-card-new {
        padding: 12px !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: 85px;
    }

    /* Icon Sizes */
    .card-icon-danger, 
    .card-icon-accent,
    .compliance-icon,
    .card-problem .card-icon,
    .customer-icon-new {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 14px !important; /* Smaller icon */
        margin-bottom: 8px !important;
    }
    
    .compliance-feature-card i.compliance-icon {
        font-size: 1.25rem !important;
        margin-bottom: 8px !important;
    }

    /* Fonts & Typography */
    .card-title, 
    .compliance-title,
    .pricing-title,
    .customer-title-new {
        font-size: 0.85rem !important; /* Significantly smaller */
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }
    
    .card-text, 
    .compliance-desc,
    .pricing-description,
    .pricing-features li {
        font-size: 0.7rem !important; /* Micro text */
        line-height: 1.3 !important;
    }
    
    .pricing-badge {
         font-size: 8px !important;
         padding: 3px 8px !important;
         top: -10px !important;
         left: 10px !important;
    }

    /* Pricing Specifics */
    .pricing-features {
        margin-bottom: 10px !important;
        gap: 4px !important;
    }
    
    .pricing-features li {
        gap: 4px !important;
    }
    
    .pricing-features i {
        width: 12px !important;
        font-size: 10px !important;
    }
    
    .btn-plod {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
    
    /* Remove/Reduce miscellaneous spacing */
    .section-header {
        margin-bottom: 20px !important;
    }
}

/* =============== FEATURE TOOLTIPS (BOOTSTRAP 3) =============== */
.feature-name-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.feature-info-icon {
    color: var(--slate-400);
    font-size: 16px;
    cursor: help;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-info-icon:hover {
    color: var(--accent);
    transform: scale(1.15);
}

/* Custom Bootstrap 3 Tooltip Styling */
.tooltip.feature-tooltip-custom {
    z-index: 10000 !important;
}

.tooltip.feature-tooltip-custom.in {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.tooltip.feature-tooltip-custom .tooltip-inner {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    padding: 0;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    max-width: 300px;
    min-width: 250px;
}

/* Bootstrap 3 Tooltip Arrow */
.tooltip.feature-tooltip-custom.top .tooltip-arrow {
    border-top-color: #1e293b !important;
}

.tooltip.feature-tooltip-custom.bottom .tooltip-arrow {
    border-bottom-color: #1e293b !important;
}

.tooltip.feature-tooltip-custom.left .tooltip-arrow {
    border-left-color: #1e293b !important;
}

.tooltip.feature-tooltip-custom.right .tooltip-arrow {
    border-right-color: #1e293b !important;
}

/* Tooltip Title Styling */
.tooltip-feature-title {
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.15) 0%, rgba(255, 204, 0, 0.05) 100%);
    color: var(--accent);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 204, 0, 0.2);
    line-height: 1.3;
}

/* Tooltip Description Styling */
.tooltip-feature-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.6;
    padding: 12px 14px;
    font-weight: 400;
}

/* Animation for tooltip appearance */
.tooltip.in {
    opacity: 1;
    animation: tooltipFadeIn 0.2s ease-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Specific Adjustments */
@media (max-width: 768px) {
    .feature-info-icon {
        font-size: 15px;
    }
    
    .tooltip.feature-tooltip-custom .tooltip-inner {
        max-width: 260px;
        min-width: 220px;
    }
    
    .tooltip-feature-title {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    .tooltip-feature-desc {
        font-size: 12px;
        padding: 10px 12px;
        line-height: 1.5;
    }
}
/* =============== SCORM SPECIFIC STYLES =============== */
.scorm-packages-pg .scorm-badge-small {
    color: #fbbf24;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: inline-block;
}

.scorm-packages-pg .scorm-icon-box {
    width: 44px;
    height: 44px;
    background: #fbbf2415;
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.scorm-packages-pg .scorm-logo-text {
    font-size: 3.5rem;
    font-weight: 900;
    color: #3b82f6;
    letter-spacing: -0.02em;
    line-height: 1;
}

.scorm-packages-pg .scorm-explain-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scorm-packages-pg .scorm-explain-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 40px 80px -15px rgba(0, 0, 0, 0.15);
}

#scorm-sticky-parent {
    position: relative;
}

.scorm-explain-card-wrapper {
    max-width: 500px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .scorm-explain-card-wrapper {
        margin-top: 50px;
    }
}

.scorm-packages-pg .scorm-sticky-container {
    padding: 0;
    height: fit-content;
    z-index: 10;
    transition: none; /* Disable transition during JS sticky repositioning */
}

.scorm-packages-pg .video-mockup-wrapper {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (max-width: 991px) {
    .scorm-packages-pg .scorm-sticky-container {
        position: static;
        padding: 10px 0 0;
    }
}

/* =============== HOW IT WORKS JOURNEY (8 STEPS) =============== */
.journey-step {
    text-align: center;
    position: relative;
    padding: 20px;
    z-index: 1;
}

.journey-icon-wrapper {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.journey-icon-wrapper i {
    font-size: 28px;
    color: var(--accent);
}

.journey-step-num {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    background: var(--accent);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(255, 224, 0, 0.3);
    z-index: 2;
}

.journey-step-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--slate-900);
}

.journey-step-desc {
    font-size: 0.85rem;
    color: var(--slate-500);
    line-height: 1.5;
    margin-bottom: 0;
}

/* Connecting Lines */
.journey-step::after {
    content: '';
    position: absolute;
    top: 60px; /* Aligned with icon center */
    left: 70%;
    width: 60%;
    height: 1px;
    background: #e2e8f0;
    z-index: 0;
}

/* Hide line on the last column of each row and on mobile */
@media (min-width: 768px) {
    .journey-row .col-md-3:nth-child(4n)::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .journey-step::after {
        display: none;
    }
}

/* Hovered State (per screenshot request for first item) */
.journey-step.is-hovered .journey-icon-wrapper {
    border-color: var(--accent);
    box-shadow: 0 15px 35px rgba(255, 224, 0, 0.2);
    transform: translateY(-5px);
}

.journey-step.is-hovered .journey-icon-wrapper i {
    transform: scale(1.1);
}

/* Row Spacing */
.journey-row + .journey-row {
    margin-top: 40px;
}

/* ===================================================
   SCORM PACKAGES – Your Journey & LMS Compatibility
   =================================================== */

/* Section backgrounds */
.sp-section-muted  { background-color: #f8f9fb; padding: 80px 0; }
.sp-section-white  { background-color: #ffffff;  padding: 80px 0; }

/* ---- Journey Cards ---- */
.sp-journey-row {
    position: relative;
}

.sp-journey-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 16px 24px;
    background: transparent;
    border-radius: 20px;
    transition: border-color .25s, box-shadow .25s, transform .25s;
    height: 100%;
    cursor: default;
}

.sp-journey-card:hover,
.sp-journey-card--active {
    transform: translateY(-4px);
}

.sp-journey-card:hover::after {
    background: #fbbf2430;
    box-shadow: 2px 0px 7px 0px #fbbf2480;
}

/* Connector line: rendered on all cards except the last in each row */
.sp-journey-card::after {
    content: '';
    position: absolute;
    top: 55px;
    right: 43px;
    width: 80px;
    height: 1px;
    background: #dee2e6;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    .sp-journey-card::after { display:none; }
}

/* Icon wrapper */
.sp-journey-icon-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #fff;
    border: 2px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: border-color .25s, box-shadow .25s, transform .25s;
	z-index: 2;
}

.sp-journey-card:hover .sp-journey-icon-wrap,
.sp-journey-card--active .sp-journey-icon-wrap {
    border-color: #fbbf2430;
    box-shadow: 0 8px 24px #fbbf2420;
    transform: translateY(-3px) scale(1.06);
}

.sp-journey-icon-wrap i {
    font-size: 1.2rem;
    color: #fbbf24;
    transition: transform .25s;
}

/* Step number badge */
.sp-journey-num {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fbbf24;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px #fbbf2430;
}

.sp-journey-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 6px;
}

.sp-journey-desc {
    font-size: 0.78rem;
    color: #6c757d;
    line-height: 1.55;
    margin-bottom: 0;
    max-width: 160px;
}

/* ---- Mobile Timeline ---- */
.sp-tl-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffce13;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px #ffce13;
    flex-shrink: 0;
    margin-left: -3px;
    position: relative;
    z-index: 2;
}

.sp-tl-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: 14px 16px;
}

.sp-tl-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #ffce13;
}

.sp-tl-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a202c;
    margin: 3px 0 4px;
}

.sp-tl-desc {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.5;
}

/* ---- LMS Marquee ---- */
.sp-marquee-wrapper {
    position: relative;
    overflow: hidden;
    padding: 4px 0;
}

.sp-marquee-fade {
    position: absolute;
    top: 0; bottom: 0;
    width: 96px;
    pointer-events: none;
    z-index: 2;
}

.sp-marquee-fade-left  { left: 0;  background: linear-gradient(90deg, #fff 0%, transparent 100%); }
.sp-marquee-fade-right { right: 0; background: linear-gradient(270deg, #fff 0%, transparent 100%); }

/* sp-section-muted variant of fade */
#how-it-works + #lms-compatibility .sp-marquee-fade-left  { background: linear-gradient(90deg,  #f8f9fb 0%, transparent 100%); }
#how-it-works + #lms-compatibility .sp-marquee-fade-right { background: linear-gradient(270deg, #f8f9fb 0%, transparent 100%); }

.sp-marquee-track {
    display: flex;
    gap: 12px;
    width: max-content;
}

/* Forward animation */
@keyframes spMarqueeFwd {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Reverse animation */
@keyframes spMarqueeRev {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.sp-marquee-fwd { animation: spMarqueeFwd 80s linear infinite; }
.sp-marquee-rev { animation: spMarqueeRev 80s linear infinite; }
.sp-marquee-slow.sp-marquee-fwd { animation-duration: 80s; }

.sp-marquee-wrapper:hover .sp-marquee-track { animation-play-state: paused; }

/* LMS pill badge */
.sp-lms-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    white-space: nowrap;
    cursor: default;
    transition: border-color .2s, box-shadow .2s;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(26,32,44,0.8);
}

.sp-lms-pill:hover {
    border-color: #fbbf2430;
    box-shadow: 0 4px 12px #fbbf2420;
}

.sp-lms-pill i {
    font-size: 0.8rem;
    color: #fbbf24;
    flex-shrink: 0;
}

/* ===================================================
   SCROLL ANIMATIONS — scroll-animate utility
   =================================================== */

.scroll-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.scroll-animate.delay-1 { transition-delay: 0.08s; }
.scroll-animate.delay-2 { transition-delay: 0.16s; }
.scroll-animate.delay-3 { transition-delay: 0.24s; }
.scroll-animate.delay-4 { transition-delay: 0.32s; }
.scroll-animate.delay-5 { transition-delay: 0.40s; }
.scroll-animate.delay-6 { transition-delay: 0.48s; }
.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate-left {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.scroll-animate-left.is-visible { opacity: 1; transform: translateX(0); }

.scroll-animate-right {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.scroll-animate-right.is-visible { opacity: 1; transform: translateX(0); }

/* ===================================================
   FAST DELIVERY CARDS — matching scorm-service.lovable.app
   =================================================== */

.scorm-delivery-card {
    background: #fff;
    border: 1.5px solid #e9ecef;
    border-radius: 20px;
    padding: 32px;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    height: 100%;
}
.scorm-delivery-card:hover {
    border-color:  rgba(255,202,44,0.12) ;
    box-shadow: 0 12px 40px  rgba(255,202,44,0.12) ;
    transform: translateY(-4px);
}
.scorm-delivery-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.scorm-delivery-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.scorm-delivery-icon--yellow { background: rgb(255 202 44 / 13%); color: #ffce13; }
.scorm-delivery-icon--green  { background: rgba(16,185,129,0.12);  color: #10b981; }
.scorm-delivery-badge {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffce13;
    margin-bottom: 3px;
    display: block;
}
.scorm-delivery-badge--green { color: #10b981; }
.scorm-delivery-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1a202c;
    margin: 0;
}
.scorm-delivery-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.scorm-delivery-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: #4b5563;
}
.scorm-delivery-list li i { font-size: 0.9rem; flex-shrink: 0; }

/* ===================================================
   TRY BEFORE YOU BUY callout
   =================================================== */

.try-before-callout {
    background: linear-gradient(135deg,  #fbbf2415  0%,  #fbbf2415  100%);
    border: 1.5px solid  #fbbf2415 ;
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 24px;
}
.try-before-callout__icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: #fbbf2415;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 1.3rem;
}
.try-before-callout__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 5px;
}
.try-before-callout__text {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.6;
}

/* ===================================================
   ENHANCED CARD HOVER (card-feature, customer-card-new)
   =================================================== */

.card-feature {
    padding: 28px 24px;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}
.card-feature:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.07);
    transform: translateY(-5px);
    border-color: rgba(255, 224, 0, 0.28);
}
.card-feature:hover .card-icon-accent {
    background: rgba(255, 224, 0, 0.22);
}
.card-icon-accent {
    width: 52px;
    height: 52px;
    background: #fbbf2415;
    color: #fbbf24;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 22px;
    transition: background 0.25s;
}

/* ===================================================
   SCORM PACKAGES PAGE CUSTOMER CARDS
   =================================================== */
.scorm-packages-pg .customer-card-new {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 32px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.scorm-packages-pg .customer-card-new:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-8px);
    border-color: rgba(255, 224, 0, 0.5);
}
.scorm-packages-pg .customer-icon-new {
    width: 48px;
    height: 48px;
    background: #fbbf2415;
    color: #fbbf24;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 1.25rem;
    transition: all 0.3s;
    border: 1px solid rgba(255, 224, 0, 0.1);
}
.scorm-packages-pg .customer-card-new:hover .customer-icon-new {
    background: #fff9e6;
    transform: rotate(5deg) scale(1.1);
    color: #f59e0b;
}
.scorm-packages-pg .customer-title-new {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0px;
}
.scorm-packages-pg .customer-card-dark {
    background: #1e293b !important;
    border: none !important;
    border-radius: 20px;
}
.scorm-packages-pg .customer-card-dark .customer-title-new {
    color: #fff !important;
    font-size: 1.25rem !important;
    margin-bottom: 12px;
}
.scorm-packages-pg .customer-card-dark p {
    color: rgba(255,255,255,0.7) !important;
    line-height: 1.6;
}
.scorm-packages-pg .customer-card-dark .learn-more {
    color: #ffce13;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    transition: gap 0.3s;
}
.scorm-packages-pg .customer-card-dark .learn-more:hover {
    gap: 12px;
    color: #fff;
}

/* ===================================================
   PRIVATE LABEL PAGE CUSTOMER CARDS (LIVE)
   =================================================== */
.private-label-pg .customer-card-new {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 28px 24px;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: center;
}
.private-label-pg .customer-card-new:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.07);
    transform: translateY(-4px);
    border-color: rgb(255 202 44 / 28%);
}
.private-label-pg .customer-icon-new {
    width: 60px;
    height: 60px;
    background: #fbbf2415;
    color: #fbbf24;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.5rem;
    transition: all 0.25s;
}
.private-label-pg .customer-card-new:hover .customer-icon-new {
    background: rgba(255, 224, 0, 0.22);
    transform: scale(1.08);
}
.private-label-pg .customer-title-new {
    font-size: 1rem;
    font-weight: 700;
    color: #1a202c;
}

/* ===================================================
   COMPLIANCE FEATURE CARDS — section-white/gray light variant
   =================================================== */

.section-white .compliance-feature-card,
.section-gray .compliance-feature-card {
    background: #fff;
    border-color: #f1f5f9;
    border-radius: 16px;
    padding: 24px;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.section-white .compliance-feature-card:hover,
.section-gray .compliance-feature-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transform: translateY(-4px);
    border-color: #fbbf2415;
}

/* ===================================================
   SCORM SPECIFIC COMPLIANCE CARD OVERRIDES
   =================================================== */
.scorm-packages-pg .compliance-feature-card {
    background: #ffffff;
    border: 1.5px solid #f1f5f9;
    border-radius: 20px;
    padding: 24px !important;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: row; /* Horizontal layout like the image */
    align-items: flex-start;
    text-align: left;
    gap: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.scorm-packages-pg .compliance-feature-card:hover {
    background: #ffffff;
    transform: translateY(-5px);
    border-color: #fbbf2440;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.scorm-packages-pg .compliance-icon-box {
    width: 44px;
    height: 44px;
    background: #fbbf2415;
    color: #fbbf24;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.scorm-packages-pg .compliance-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 6px;
    line-height: 1.3;
}

.scorm-packages-pg .compliance-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 0;
}

/* Dark variant specifically for Trust sections */
.section-dark .compliance-feature-card {
    background: #1e293a !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px;
    padding: 30px !important;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.section-dark .compliance-feature-card:hover {
    background: #252f3f !important;
    border-color: #fbbf2440 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important;
    transform: translateY(-5px);
}

.compliance-icon-box {
    width: 48px;
    height: 48px;
    background: #fbbf2415;
    color: #fbbf24;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 1.25rem;
    transition: all 0.3s;
}

.compliance-feature-card:hover .compliance-icon-box {
    transform: scale(1.1);
    background: #fbbf2425;
}

/* Dark icons specifically for Trust sections */
.section-dark .compliance-icon {
    font-size: 1.75rem;
    color: #fbbf24;
    margin-bottom: 24px;
    display: inline-block;
}

.section-dark .compliance-title {
    color: #fff !important;
    font-weight: 700;
    margin-bottom: 12px;
}

.section-dark .compliance-desc {
    color: rgba(255, 255, 255, 0.6) !important;
    margin-bottom: 0;
}

/* ===================================================
   THE CLEAR CHOICE — Comparison Table
   =================================================== */

.scorm-compare-table {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Header row */
.scorm-compare-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.scorm-compare-header .scorm-compare-col {
    padding: 16px 24px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scorm-compare-header .scorm-compare-feature-col {
    display: block; /* feature label column spacer */
}

.scorm-compare-header .scorm-compare-them {
    text-align: center;
}

.scorm-compare-header .scorm-compare-us {
    text-align: center;
    background: rgba(255, 224, 0, 0.08);
    border-left: 1px solid rgba(255, 224, 0, 0.15);
    border-right: 1px solid rgba(255, 224, 0, 0.15);
}

/* Label badges */
.scorm-compare-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
}

.scorm-compare-label.them {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

.scorm-compare-label.us {
    background: rgb(255 202 44 / 15%);
    color: #ffce13;
    border: 1px solid rgb(255 202 44 / 30%);
}

/* Data rows */
.scorm-compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s;
}

.scorm-compare-row:hover {
    background: rgba(255,255,255,0.03);
}

.scorm-compare-row-last {
    border-bottom: none;
}

/* Feature (left) column */
.scorm-compare-feature {
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: rgba(255,255,255,0.8);
}

.scorm-compare-feature i {
    font-size: 1.1rem;
    color: #ffce13;
    margin-top: 2px;
    flex-shrink: 0;
}

.scorm-compare-feature strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    display: block;
    margin-bottom: 3px;
}

.scorm-compare-feature p {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    margin: 0;
}

/* Them / Us value cells */
.scorm-compare-them-val,
.scorm-compare-us-val {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

.scorm-compare-them-val {
    color: rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.06);
}

.scorm-compare-us-val {
    border-left: 1px solid rgba(255,206,19,0.15);
    background: rgba(255,206,19,0.04);
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 767px) {
    .scorm-compare-header,
    .scorm-compare-row {
        grid-template-columns: 1fr;
    }

    .scorm-compare-header .scorm-compare-feature-col {
        display: none;
    }

    .scorm-compare-header .scorm-compare-us {
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    .scorm-compare-feature {
        background: rgba(255,255,255,0.03);
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    .scorm-compare-them-val,
    .scorm-compare-us-val {
        border-left: none;
        padding: 12px 24px;
    }

    .scorm-compare-them-val {
        border-top: 1px solid rgba(255,255,255,0.05);
    }

    .scorm-compare-us-val {
        border-top: 1px solid rgba(255,206,19,0.08);
    }
}

/* ============================================================
   ADVANCED SCORM CALCULATOR & COUNTER STYLES
   ============================================================ */

.calc-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.calc-step-header i {
    color: #fbbf24;
    font-size: 1.1rem;
}

.calc-step-title {
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 0;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Step 1: Package Toggles */
.calc-package-toggle {
    display: flex;
    gap: 15px;
}

.package-btn {
    flex: 1;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    text-align: left;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.package-btn:hover {
    border-color: #fbbf24;
}

.package-btn.active {
    border-color: #fbbf24 !important;
    background: #fffdf2 !important;
    box-shadow: 0 5px 15px rgba(255, 224, 0, 0.15);
}

.package-btn .radio-check {
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
}

.package-btn.active .radio-check {
    border-color: #fbbf24;
}

.package-btn.active .radio-check::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #fbbf24;
    border-radius: 50%;
}

.package-btn-title-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.package-btn-title {
    font-weight: 700;
    color: #0f172a;
}

.package-btn-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin-left: 30px;
    margin-bottom: 0;
}

/* Step 2: Course List */
.course-list-container {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    height: 260px;
    overflow-y: auto;
}

.course-item {
    padding: 10px 15px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
}

.course-item:hover {
    background: #f8fafc;
}

.course-item.selected {
    background: #fffdf5;
}

.course-item .custom-check {
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
    transition: all 0.2s;
}

.course-item.selected .custom-check {
    background: #fff;
    border-color: #fbbf24;
}

.course-item.selected .custom-check::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fbbf24;
    font-size: 10px;
}

.course-info {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-grow: 1;
}

.course-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fbbf24;
    flex-shrink: 0;
    margin-left: 10px;
}

/* Selected Courses area */
.selected-courses-area {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 15px;
    min-height: 120px;
    max-height: 160px;
    overflow-y: auto;
}

.selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.selected-tag .remove-tag {
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.85rem;
}

.selected-tag .remove-tag:hover {
    color: #ef4444;
}

/* Range Slider Styling */
.seat-slider-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px 20px;
}

.seat-display-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.seat-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
}

.seat-count-val {
    font-size: 2rem;
    font-weight: 800;
    color: #fbbf24;
}

.custom-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 7px;
    background: #334155;
    border-radius: 10px;
    outline: none;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #fbbf24;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

/* Final Estimate Card */
.final-estimate-card {
    background: rgba(255, 206, 19, 0.04);
    border: 1px solid rgba(255, 206, 19, 0.12);
    border-radius: 20px;
    padding: 20px 25px;
}

.estimate-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
}

.estimate-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 6px;
}

.estimate-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fbbf24;
    line-height: 1;
}

.estimate-details {
    text-align: right;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 400;
    line-height: 1.5;
}

/* Counter Animation Classes */
.counter-up {
    display: inline-block;
}

@media (max-width: 991px) {
    .package-btn {
        margin-bottom: 10px;
    }
}







.scorm-packages-pg .text-warning,
.private-label-pg .text-warning {
    color: #fbbf24 !important;
}
/* =============== SCORM PARTNERSHIP FINDER (pf-* scoped) =============== */

/* Progress bar: sits ON TOP of the card border */
.pf-progress-wrap {
    height: 12px;
    background: #e5e7eb;
    border-radius: 16px 16px 0px 0px;
    overflow: hidden;
    margin-bottom: -1px;
}

.pf-progress-bar {
    height: 100%;
    background: #fbbf24;
    border-radius: 6px 6px 0 0;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card */
.pf-card {
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

/* Step body padding */
.pf-step-body {
    padding: 36px 40px;
}

@media (max-width: 600px) {
    .pf-step-body { padding: 28px 24px; }
}

/* Question label: QUESTION X OF 3 */
.pf-question-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fbbf24;
    margin-bottom: 12px;
}

/* Question title */
.pf-question-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 28px;
    line-height: 1.4;
}

/* Options grid */
.pf-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Option button: matches reference exactly */
.pf-opt-btn {
    width: 100%;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 400;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    line-height: 1.4;
}

.pf-opt-btn:hover {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.04);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2);
    outline: none;
}

.pf-opt-btn:focus {
    outline: none;
    border-color: #fbbf24;
}

/* Back button row */
.pf-back-row {
    margin-top: 32px;
}

.pf-back-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.15s ease;
}

.pf-back-btn:hover { color: #374151; }

/* Result step */
.pf-result-body {
    padding: 36px 40px;
}

@media (max-width: 600px) {
    .pf-result-body { padding: 28px 24px; }
}

/* Recommended badge: solid amber pill */
.pf-rec-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fbbf24;
    color: #000;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 14px;
    border-radius: 9999px;
    margin-bottom: 24px;
}

/* Plan header row */
.pf-plan-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 32px;
}

.pf-plan-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: #fef3c7;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #d97706;
}

.pf-plan-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 4px;
    line-height: 1.2;
}

.pf-plan-subtitle {
    font-size: 0.9rem;
    color: #6b7280;
}

/* Details table */
.pf-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
}

.pf-details-table tr {
    border-bottom: 1px solid #f3f4f6;
}

.pf-details-table tr:last-child { border-bottom: none; }

.pf-details-table td {
    padding: 15px 0;
    vertical-align: top;
}

.pf-detail-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    width: 42%;
    padding-right: 12px;
    line-height: 1.6;
}

.pf-detail-val {
    font-size: 0.9rem;
    font-weight: 500;
    color: #111827;
    width: 58%;
}

/* Result action buttons */
.pf-result-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-get-started-btn {
    flex: 1;
    min-width: 160px;
    padding: 8px 24px;
    background: #fbbf24;
    color: #000;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s, transform 0.15s;
}

.pf-get-started-btn:hover {
    background: #f59e0b;
	color: #000;
    transform: translateY(-1px);
}

.pf-do-again-btn {
    padding: 8px 24px;
    background: #fff;
    color: #374151;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.pf-do-again-btn:hover { border-color: #9ca3af; }

/* Footer note below card */
.pf-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: 500;
    text-align: center;
    padding: 0 16px;
}

.pf-footer-note i { font-size: 0.85rem; }

@media (max-width: 480px) {
    .pf-result-actions { flex-direction: column; }
    .pf-get-started-btn, .pf-do-again-btn { width: 100%; }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}

.bounce {
    animation: bounce 1s ease;
}

/* ======= PARTNERSHIP FINDER – UPGRADED RESULT CARD ======= */

/* Selected state on option buttons */
.pf-opt-btn.pf-opt-selected {
    border-color: #fbbf24 !important;
    background: #fffbeb !important;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3) !important;
    font-weight: 600;
    color: #92400e;
}

/* Answer summary chips (shows user's 3 choices at top of result) */
.pf-answers-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.pf-answer-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 0.78rem;
    color: #374151;
}

.pf-chip-label {
    font-weight: 700;
    color: #6b7280;
}

/* Plan badge small label (e.g. "Best for New Partners") */
.pf-plan-badge-small {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

/* Plan text block beside icon */
.pf-plan-text {
    flex: 1;
}

/* Summary blurb paragraph */
.pf-summary-blurb {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f3f4f6;
}

/* Key highlights 2-column grid */
.pf-highlights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 28px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f3f4f6;
    background: #fafafa;
}

.pf-highlight-row {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    border-right: 1px solid #f3f4f6;
}

.pf-highlight-row:nth-child(even) {
    border-right: none;
}

.pf-highlight-row:nth-last-child(-n+2) {
    border-bottom: none;
}

.pf-highlight-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin-bottom: 3px;
}

.pf-highlight-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

@media (max-width: 480px) {
    .pf-highlights-grid {
        grid-template-columns: 1fr;
    }
    .pf-highlight-row {
        border-right: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    .pf-highlight-row:last-child {
        border-bottom: none !important;
    }
}

/* What's Included features block */
.pf-features-block {
    margin-bottom: 28px;
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
}

.pf-features-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #374151;
    margin-bottom: 16px;
}

.pf-features-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pf-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}

.pf-feature-check {
    color: #22c55e;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}