@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

/* font-family: "Google Sans", sans-serif; */
:root {
	--bg: #FFFFFF;
	--bg-soft: #F6F8FC;
	--surface: #FFFFFF;
	--surface-2: #F1F4F9;
	--line: #E6E9F1;
	--line-strong: #D7DCE8;
	--text: #111629;
	--text-dim: #616B82;
	--primary: #3457D5;
	--primary-dark: #28429E;
	--primary-soft: #EEF1FD;
	--signal: #16A34A;
	--signal-soft: #E7F7EE;
	--shadow-sm: 0 1px 2px rgba(17, 22, 41, .05);
	--shadow-md: 0 8px 24px -12px rgba(17, 22, 41, .12);
	--shadow-lg: 0 24px 48px -18px rgba(17, 22, 41, .16);
	--font-display: "Google Sans", sans-serif;
	--font-body: "Google Sans", sans-serif;
	--font-mono: "Google Sans", sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--primary);
	color: #fff;
}

a {
	transition: color .2s ease;
  text-decoration: none;
}

img {
	max-width: 100%;
}

.mono {
	font-family: var(--font-mono);
}

.text-dim {
	color: var(--primary-soft);
}

h1,
h2,
h3,
h4,
.font-display {
	font-family: var(--font-display);
	letter-spacing: -.015em;
	color: var(--text);
}



.eyebrow .arrow {
	opacity: .6;
	font-size: .9em;
}

.eyebrow.status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 0 0 rgba(22, 163, 74, .5);
	animation: dotpulse 2s infinite;
}

@keyframes dotpulse {
	0% {
		box-shadow: 0 0 0 0 rgba(22, 163, 74, .45);
	}

	70% {
		box-shadow: 0 0 0 8px rgba(22, 163, 74, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
	}
}

/* ---------- Top info bar ---------- */
.topbar {
	background: var(--text);
	color: rgba(255, 255, 255, .75);
	font-size: .8rem;
	padding: .55rem 0;
}

.topbar a {
	color: rgba(255, 255, 255, .75);
	text-decoration: none;
}

.topbar a:hover {
	color: #fff;
}

.topbar .item {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.topbar .btn-topbar {
	background: var(--primary);
	color: #fff;
	border-radius: 100px;
	padding: .35rem 1rem;
	font-weight: 600;
	font-size: .78rem;
	text-decoration: none;
}

/* ---------- Nav ---------- */
.navbar {
	top: 0 !important;
	width: 100%;
	position: absolute;
	/* background: rgb(255 255 255 / 30%); */
	backdrop-filter: blur(4px);
	border-bottom: 1px solid transparent;
	transition: all .35s cubic-bezier(.4, 0, .2, 1);
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.navbar.scrolled {
	padding-top: .65rem;
	padding-bottom: .65rem;
	background: rgb(0 0 0 / 22%);
	border-bottom: 1px solid #2c2c2c;
	box-shadow: var(--shadow-sm);
}

.navbar-brand img {
	width: 200px;
	display: block;
}

.nav-link {
	color: var(--bg) !important;
	font-size: .93rem;
	font-weight: 500;
	margin: 0 1.7rem;
	position: relative;
	padding: .4rem 0 !important;
}

.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--primary);
	transition: width .25s cubic-bezier(.4, 0, .2, 1);
}

.nav-link:hover {
	color: var(--primary-soft) !important;
}

.nav-link:hover::after {
	width: 100%;
}

.btn-primary-x {
	    display: inline-flex;
	    align-items: center;
	    gap: 15px;
	    padding: 12px 20px;
	    background: linear-gradient(135deg, #3457D5, #5EC7F8);
	    color: #fff;
	    border-radius: 9px;
	    text-decoration: none;
	    font-size: 16px;
	    font-weight: 600;
	    transition: .35s;
}

.btn-primary-x:hover {
	color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(52, 87, 213, .30);
}

.btn-primary-x:active {
	transform: translateY(0);
}

.btn-ghost {
	color: var(--text) !important;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	padding: .58rem 1.25rem;
	font-size: .9rem;
	font-weight: 600;
	background: #fff;
	transition: all .2s cubic-bezier(.4, 0, .2, 1);
	display: inline-block;
	text-decoration: none;
}

.btn-ghost:hover {
	border-color: var(--primary);
	color: var(--primary) !important;
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

.navbar-toggler{

    border:1px solid rgba(255,255,255,.2);

}

.navbar-toggler-icon{

    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	padding: 10rem 0;
	height: 750px;
	overflow: hidden;
	background: url(../img/banner.jpg) no-repeat 0 0;
	background-size: cover;
	background-attachment: fixed;
}

.hero .dots {
	position: absolute;
	top: 120px;
	left: 6%;
	width: 110px;
	opacity: .7;
	z-index: 0;
	pointer-events: none;
}

.hero .container {
	position: relative;
	z-index: 1;
}

.hero h1 {
	text-align: center;
	color: #fff;
	font-size: 4rem;
	font-weight: 800;
	line-height: 1.3;
}

.hero .lead-text {
	text-align: center;
	color: var(--line);
	font-size: 1.12rem;
	/* max-width:520px; */
	line-height: 1.8;
}

.status-pill {
	justify-content: center;
	display: flex;
	align-items: center;
	gap: .7rem;
	/* background:var(--signal-soft); */
	/* border:1px solid #CFEEDA; */
	border-radius: 100px;
	/* padding:.42rem .95rem; */
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--primary-soft) !important;
	font-weight: 600;
	margin-bottom: 1rem;
}

.status-pill .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--primary-soft);
}

.hero-badges {
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin-top: 3rem;
}

.hero-badges img {
	border-radius: 20px;
}

.hero-media {
	position: relative;
}

.hero-media img {
	width: 100%;
	height: auto;
	animation: floaty 5s ease-in-out infinite;
}

@keyframes floaty {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-14px);
	}
}
/*==============================
 HERO TRUST BAR
==============================*/

.hero-trust-bar{

    position: relative;

    margin-top: 30px;

    background: rgba(255,255,255,.75);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(52,87,213,.12);

    border-radius: 20px;

    padding: 18px 0;
	width: 100%;
    overflow: hidden;

    box-shadow: 0 20px 50px rgba(52,87,213,.08);

}

/* Fade Effect */

.hero-trust-bar::before,
.hero-trust-bar::after{

    content:"";

    position:absolute;

    top:0;

    width:120px;

    height:100%;

    z-index:2;

}

.hero-trust-bar::before{

    left:0;

    background:linear-gradient(to right,#fff,transparent);

}

.hero-trust-bar::after{

    right:0;

    background:linear-gradient(to left,#fff,transparent);

}

.marquee{

    overflow:hidden;
	width: 100%;
    white-space:nowrap;

}

.marquee-content{

    align-items:center;
    gap:70px;
 	display: inline-flex;
    min-width: max-content;
    will-change: transform;

    animation:marquee 25s linear infinite;

}

.marquee:hover .marquee-content{

    animation-play-state:paused;

}

/* Trust Item */

.trust-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:17px;

    font-weight:600;

    color: var(--primary-dark);

    transition:.35s;

}

.trust-item:hover{

    color:#3457D5;

    transform:translateY(-2px);

}

.trust-item i{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EEF1FD;

    color:#3457D5;

    font-size:18px;

    transition:.4s;

}

.trust-item:hover i{

    background:#3457D5;

    color:#fff;

    transform:rotate(360deg);

}

/* Animation */

@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*==============================
 Responsive
==============================*/

@media(max-width:991px){

.hero-trust-bar{

margin-top:50px;

border-radius:25px;

}

.marquee-content{

gap:45px;

}

.trust-item{

font-size:15px;

}

}

@media(max-width:576px){

.hero-trust-bar{

padding:14px 0;

}

.marquee-content{

gap:35px;

}

.trust-item{

font-size:14px;

}

.trust-item i{

width:30px;

height:30px;

font-size:15px;

}


}

/* ---------- Sections generic ---------- */
section {
	padding: 5rem 0;
}

.section-head {
	max-width: 640px;
	margin-bottom: 3.2rem;
}

.section-head h2 {
	font-size: 3rem;
	font-weight: 700;
	margin-top: .7rem;
	line-height: 1.3;
}

/* ---------- Services ---------- */
.services{
  text-align: center;
}
.services .section-head{
  margin: 0 auto 20px auto;
}
.status-bar {
	justify-content: center;
	margin-bottom: 1rem;
	text-align: center;
	color: var(--primary);
	display: flex;
	align-items: center;
	gap: .7rem;
	font-family: var(--font-body);
	font-weight: 600;
}

.svc-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.9rem 1.7rem;
	height: 100%;
	position: relative;
	overflow: hidden;
	transition: all .35s cubic-bezier(.4, 0, .2, 1);
}

.svc-card:hover {
	background: linear-gradient(145deg, var(--primary-soft), transparent);
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: var(
	--shadow-lg);
}

.svc-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
	padding: 1px;
	background: linear-gradient(135deg, var(--primary), transparent 60%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .35s ease;
}

.svc-card:hover::before {
	opacity: 1;
}

.svc-card .icon-box {
	margin: 1.5rem auto;
	width: 60px;
	height: 60px;
	/* border-radius:11px; */
	background: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	margin-bottom: 1.7rem;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .3s ease, color .3s ease;
}

.svc-card:hover .icon-box {
	transform: scale(1.08) rotate(360deg);
	/* background:var(--primary); */
	color: #fff;
}

.svc-card h3 {
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.svc-card p {
	color: var(--text-dim);
	font-size: .9rem;
	margin-bottom: 0;
	line-height: 1.55;
}

.svc-card a.stretched-link {
	color: inherit;
	text-decoration: none;
}

/* ---------- About ---------- */
.about-sec {
	background: url(../img/about-bg.jpg) no-repeat 0 0;
	background-size: cover;
}

.about-sec .section-title h2 {
	text-align: left;
}

.about-sec .status-bar {
	justify-content: start;
}

.about-sec .section-title p {
	text-align: left;
	width: 86%;
	line-height: 1.9;
}

.about-media {
	position: relative;
	min-height: 400px;
}

.about-media .shape-dots {
	position: absolute;
	top: -30px;
	right: -30px;
	width: 100px;
	z-index: 0;
}

.about-media img.main {
	position: relative;
	z-index: 1;
	border-radius: 18px;
	box-shadow: var(--shadow-lg);
	width: 100%;
}

.about-media .float-card {
	border-radius: 20px;
	position: absolute;
	bottom: -126px;
	left: -44px;
	z-index: 2;
	width: 39%;
	animation: floaty 6s ease-in-out infinite;
}

.check-list li {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin-bottom: .75rem;
	color: var(--text-dim);
	font-size: .96rem;
}

.check-list li::before {
	content: "";
	color: var(--primary);
	font-weight: 700;
	background: var(--primary-soft);
	width: 22px;
	height: 22px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: .72rem;
	margin-top: .1rem;
}

.monitoring-section {

	background: #fff;

}

.monitor-box {

	background: linear-gradient(135deg, #3457D5, #5EC7F8);
	border-radius: 90px;
	overflow: hidden;
	position: relative;
	transition: .4s;

}

.monitor-box:hover {

	transform: translateY(-8px);
	box-shadow: 0 30px 60px rgba(52, 87, 213, .20);

}

.monitor-content {

	color: #fff;
	padding: 45px 60px;

}

.monitor-content h2 {

	font-size: 42px;
	font-weight: 700;
	margin-bottom: 15px;

}

.monitor-content p {

	font-size: 18px;
	line-height: 1.8;
	max-width: 700px;
	opacity: .95;

}

.monitor-list {
	gap: 25px;
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding: 0;
	margin: 0;
}

.monitor-list li {
	border-radius: 14px;
	background: var(--primary-soft);
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 10px;
	margin-bottom: 30px;
	font-size: 16px;
	color: #333;
	transition: .3s;
	height: 68px;
}

.monitor-list li:hover {
	color: #3457D5;
	
}

.monitor-list i {
	width: 40px;
	height: 40px;
	background: #EEF1FD;
	color: #3457D5;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 17px;
	transition: .4s;
}

.monitor-list li:hover i {

	background: #3457D5;
	color: #fff;
	transform: rotate(360deg);

}

.contact-box {
	display: flex;
	/* justify-content:space-between; */
	align-items: center;
	flex-wrap: wrap;
	gap: 25px;
}

.phone {

	display: flex;
	align-items: center;
	gap: 20px;

}

.phone-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(135deg, #3457D5, #6DD5FA);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 28px;
	animation: pulse 2s infinite;
}

.phone h4 {
	font-size: 21px;
	margin: 0;
	font-weight: 700;
	color: #122040;
}

.explore-btn {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	padding: 6px 20px;
	background: linear-gradient(135deg, #3457D5, #5EC7F8);
	color: #fff;
	border-radius: 20px;
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	transition: .35s;
}

.explore-btn:hover {
	color: #fff;
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(52, 87, 213, .30);

}

.explore-btn i {
	font-size: 26px;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(52, 87, 213, .4);
	}

	70% {
		box-shadow: 0 0 0 15px rgba(52, 87, 213, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(52, 87, 213, 0);
	}
}

@media(max-width:991px) {


	.monitor-content {
		padding: 30px;
		text-align: center;
	}

	.monitor-content h2 {
		font-size: 34px;
	}

	.contact-box {
		justify-content: center;
		text-align: center;

	}

	.phone {

		justify-content: center;

	}

}

@media(max-width:576px) {

	.monitor-content h2 {

		font-size: 28px;

	}
	.monitor-list{
	flex-direction: column;
	margin-bottom: 10px;
}

	.monitor-list li {
		margin-bottom: 10px;
		font-size: 18px;

	}

	.phone h4 {

		font-size: 24px;

	}

	.explore-btn {

		width: 100%;
		justify-content: center;

	}


}

/* ---------- Feature belt (icons row) ---------- */
.feature-belt {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.6rem;
}

.feature-belt .fb-item {
	flex: 1 1 200px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 1.2rem;
	display: flex;
	align-items: center;
	gap: .8rem;
	transition: all .25s ease;
}

.feature-belt .fb-item:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.feature-belt .icon-box {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--primary-soft);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.feature-belt span {
	font-weight: 600;
	font-size: .9rem;
}

/* why-choose-us */
.choose-section {
	background: url(../img/ch-bg.jpg) no-repeat center center;
	background-size: cover;
}

.choose-section .status-pill {
	justify-content: start;
}

.choose-section .section-title h2 {
	color: var(--primary-soft);
	margin-bottom: 1.2rem;
	/* text-align: left; */
}

.choose-section .section-title h2 span {
	color: #adbfff;
}

.ch-img img {
	height: 100%;
	border-radius: 20px;
}

/* ---------- Numbered feature list ---------- */
.num-item {
	display: flex;
	gap: 1.3rem;
	padding: 1.6rem 0;
	border-bottom: 1px solid #eef1fd6e;
}

.num-item:last-child {
	border-bottom: none;
}

.num-item .n {
	font-family: var(--font-mono);
	font-size: 1rem;
	font-weight: 700;
	color: var(--primary);
	width: 50px;
	height: 50px;
	border-radius: 10px;
	background: var(--primary-soft);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.num-item h4 {
	color: var(--primary-soft);
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

.num-item p {
	color: var(--bg-soft);
	font-size: .9rem;
	margin: 0;
	line-height: 1.55;
}

/* ---------- Pricing ---------- */
.price-card {
	background: linear-gradient(180deg, var(--primary-soft), transparent);
	border: 1px solid var(
 --strong);
	border-radius: 18px;
	padding: 2.1rem 1.7rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: all .35s cubic-bezier(.4, 0, .2, 1);
}

.price-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	border-color: var(--line-strong);
}

.price-card.featured {
	border-color: var(--primary);
	box-shadow: 0 24px 50px -20px rgba(52, 87, 213, .3);
	position: relative;
	background: linear-gradient(180deg, var(--primary-soft) 0%, #fff 22%);
}

.price-card.featured:hover {
	box-shadow: 0 28px 58px -18px rgba(52, 87, 213, .4);
}

.price-card.featured::before {
	content: "MOST POPULAR";
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary);
	color: #fff;
	font-family: var(--font-mono);
	font-size: .62rem;
	padding: .3rem .75rem;
	border-radius: 100px;
	letter-spacing: .06em;
	font-weight: 700;
	box-shadow: 0 4px 10px -2px rgba(52, 87, 213, .5);
}

.price-card .plan-name {
	font-family: var(--font-body);
	font-size: .9rem;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
}

.price-card .plan-price {
	font-family: var(--font-display);
	font-size: 2.3rem;
	font-weight: 800;
	margin: .45rem 0 1.3rem;
}

.price-card .plan-price sup {
	font-size: 1rem;
	color: var(--text-dim);
	font-weight: 600;
}

.price-card .plan-price .per {
	font-size: .85rem;
	color: var(--text-dim);
	font-weight: 500;
}

.price-card ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1.7rem;
	flex-grow: 1;
}

.price-card ul li {
	font-size: .87rem;
	color: var(--text-dim);
	padding: .5rem 0;
	border-top: 1px dashed var(--line-strong);
	display: flex;
	align-items: center;
	gap: .55rem;
}

.price-card ul li::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--primary);
	flex-shrink: 0;
}

/* ---------- CTA ---------- */
.cta-section{
	overflow: hidden;
	padding: 0 0 4rem 0 !important;
}
.cta-band {
	background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%);
	border-radius: 24px;
	padding: 3rem;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 30px 60px -24px rgba(40, 66, 158, .5);
	position: relative;
	overflow: hidden;
}


.cta-band::after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	top: -220px;
	right: -120px;
}
.cta-band .section-title .status-pill{
  justify-content: start;
}
.cta-band h2,
.cta-band p {
	color: #fff !important;
	position: relative;
}
.cta-band .section-title span{
  color: var(--primary-soft);
}
.cta-band .lead-note {
	color: rgba(255, 255, 255, .8) !important;
}

.cta-band .cta-img {
	position: relative;
	z-index: 1;
	max-width: 260px;
}

.cta-contact-info{
	width: 100%;
	margin-top: 25px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	z-index: 1;
}



.cta-contact-item{
	display: flex;
	align-items: center;
	border-right: 1px solid var(--dark-divider-color);
	margin-right: 30px;
	padding-right: 30px;
}

.cta-contact-item:last-child{
	border: none;
	margin: 0;
	padding: 0;
}

.cta-contact-item .icon-box{
	height: 100%;
	width: 19%;
	background: none !important;
	margin-right: 20px;
	margin-bottom: 0 !important;
}

.cta-contact-item .icon-box img{
	width: 100%;
	max-width: 50px;
}

.cta-contact-content{
	width: calc(100% - 70px);
}

.cta-contact-content h3{
	font-size: 22px;
	color: var(--bg);
	margin-bottom: 5px;
}

.cta-contact-content p{
	color: var(--white-color);
	margin-bottom: 0;
	margin-top: 10px !important;
}

.cta-contact-content p a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.cta-contact-content p a:hover{
	color: var(--primary-color);
}

.cta-box-image{
	width: calc(36% - 35px);
}

.cta-box-image figure{
	display: block;
	border-radius: 30px;
}

.cta-box-image img{
	width: 100%;
	aspect-ratio: 1 / 0.705;
	object-fit: cover;
	border-radius: 30px;
}


/* ---------- Footer ---------- */
footer {
	border-top: 1px solid var(--line);
	padding: 5rem 0 2rem;
	background: url(../img/f-bg.jpg) no-repeat 0 0;
	background-size: cover;
}

footer h6 {
	font-family: var(--font-body);
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--primary-soft);
	margin-bottom: 1.9rem;
	font-weight: 600;
}

footer a {
	color: var(--primary-soft);
	text-decoration: none;
	font-size: .9rem;
	display: block;
	margin-bottom: 1rem;
	transition: .2s;
}

footer a:hover {
	color: var(--primary);
	padding-left: 3px;
}

.footer-bottom {
	border-top: 1px solid var(--line);
	margin-top: 2.6rem;
	padding-top: 1.6rem;
	font-size: .9rem;
	color: #fff;
}

.newsletter input {
	background: #fff;
	border: 1px solid var(--line-strong);
	color: var(--text);
	border-radius: 10px 0 0 10px;
}

.newsletter input:focus {
	box-shadow: none;
	border-color: var(--primary);
	background: #fff;
	color: var(--text);
}

.newsletter button {
	border-radius: 0 10px 10px 0;
}

/* ---------- Reveal / focus / utility ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

@media(max-width:991px) {
	.nav-link{
    margin:12px 0;
}

	
.hero{
    background-attachment: scroll;
}
.about-media .float-card{
    left:0;
    bottom:-40px;
    width:45%;
}


	.suite-card {
		padding: 2rem;
	}
}

@media(max-width:767px) {
	section{
		padding: 3rem 0;
	}
	.about-media{
		min-height: 360px;
	}
	.about-media .shape-dots{
		display: none;
	}
	.about-media .float-card{
		display: none;
	}
	.hero {
		padding: 6.6rem 0 3rem;
	}

	.hero h1 {
		font-size: 2.2rem;
	}

	.cta-band {
		padding: 2rem;
	}

	.cta-band .cta-img {
		display: none;
	}
	.cta-band::after{
		display: none;
	}

	.topbar .d-lg-flex {
		display: none !important;
	}
}

/* feature-section */

.features-section {
	background: #fff;
}

.section-title {
	max-width: 700px;
	margin: auto;
}

.sub-title {
	font-family: var(--font-body);
	display: inline-block;
	/* background:rgba(52,87,213,.08); */
	color: var(--primary);
	/* padding:8px 18px; */
	/* border-radius:50px; */
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 18px;
}

.section-title h2 {
	font-size: 48px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--text);
}

.section-title span {
	color: var(--primary);
}

.section-title p {

	color: var(--text-light);
	margin-top: 16px;
	font-size: 17px;

}

.feature-card {

	position: relative;
	overflow: hidden;
	border-radius: 28px;
	height: 100%;
	transition: .45s;
	cursor: pointer;

}

.feature-card:hover {

	transform: translateY(-10px);

}

.feature-large {

	height: 360px;

}

.feature-large img {

	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .6s;

}

.feature-large:hover img {

	transform: scale(1.08);

}

.overlay {

	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
			rgba(0, 0, 0, .75),
			rgba(0, 0, 0, .15));

}

.content {

	position: absolute;
	left: 35px;
	bottom: 35px;
	color: #fff;

}

.content h3 {
	color: var(--bg-soft);
	font-size: 34px;
	font-weight: 700;
	margin: 15px 0;
}

.tag {
	margin-bottom: 1.1rem;
	display: inline-block;
	background: rgba(255, 255, 255, .15);
	backdrop-filter: blur(12px);
	padding: 8px 18px;
	border-radius: 50px;
	font-size: 14px;
}

.blue-card h3 {
	color: var(--primary-soft);
}

.small-card {

	background: #F7F9FF;
	border: 1px solid var(--border);
	padding: 40px;

}

.small-card .icon {

	width: 70px;
	height: 70px;
	background: var(--primary);
	color: #fff;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 25px;

}

.small-card:hover {background: linear-gradient(45deg, var(--primary), transparent);color: #fff !important;}

.small-card:hover p {

	color: #fff;

}

.small-card:hover .icon {

	background: #fff;
	color: var(--primary);

}

.beige {

	background: #EEF3FF;
	padding: 35px;

}

.blue-card {

	background: linear-gradient(135deg,
			var(--primary),
			var(--primary-dark));

	color: #fff;
	padding: 40px;

}

.blue-card p {

	color: rgba(255, 255, 255, .85);

}

.image-card {

	height: 250px;

}

.image-card img {

	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .6s;

}

.image-card:hover img {

	transform: scale(1.08);

}

.feature-card p {

	color: var(--text-light);
	line-height: 1.7;

}

.feature-card h4 {

	margin: 20px 0 15px;
	font-size: 28px;
	font-weight: 700;

}

@media(max-width:992px) {

	.section-title h2 {

		font-size: 38px;

	}

	.feature-large {

		height: 300px;

	}
}

@media(max-width:768px) {

	.section-title h2 {

		font-size: 32px;

	}

	.content {

		left: 25px;
		bottom: 25px;

	}

	.content h3 {

		font-size: 26px;

	}

}


/* ================================== */
/*==================================
   FEATURE SECTION
===================================*/

.feature-section{
    position:relative;
    background:#fff;
    overflow:hidden;
}



.feature-section .container{
    position:relative;
    z-index:2;
}


/*==================================
SECTION TITLE
===================================*/

.subtitle{

    display:inline-flex;
    align-items:center;
    gap:8px;

    background:#EEF1FD;
    color:var(--primary);

    padding:10px 18px;

    border-radius:50px;

    font-weight:600;

    margin-bottom:18px;

}

.subtitle::before{

    content:"";

    width:8px;
    height:8px;

    background:#2ecc71;

    border-radius:50%;

    animation:pulseDot 2s infinite;

}

/* .section-title{

    max-width:760px;
    margin:auto;

} */

.section-title h2{

    font-size:52px;
    font-weight:700;
    line-height:1.2;

}

.section-title span{

    color:var(--primary);

}

.section-title p{color:#6d6d6d;font-size:16px;margin-top: 20px;}


/*==================================
COMMON CARD
===================================*/

.feature-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    transition:.45s;

    height:100%;

    background:#fff;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}

.feature-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 30px 80px rgba(52,87,213,.15);

}

.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    transparent,
    rgba(52,87,213,.25),
    transparent);

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    opacity:0;

    transition:.4s;

}

.feature-card:hover::before{

    opacity:1;

}


/*==================================
MAIN CARD
===================================*/

.monitoring-card{height: 100%;}

.monitoring-card img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:.8s;

}

.monitoring-card:hover img{

    transform:scale(1.08);

}

.overlay{position:absolute;inset:0;background: linear-gradient(to top, rgb(1 12 48 / 86%), rgb(225 233 255 / 0%));}


/*==================================
DASHBOARD CONTENT
===================================*/

.dashboard-box{

    position:absolute;

    left:40px;

    bottom:35px;

    max-width:540px;

    color:#fff;

}

.dashboard-box h3{color: var(--bg-soft);font-size:36px;font-weight:700;margin:15px 0;}

.dashboard-box p{

    color:rgba(255,255,255,.88);

    line-height:1.8;

}


/*==================================
TAG
===================================*/

.tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    backdrop-filter:blur(15px);

    background:rgba(255,255,255,.18);

    color:#fff;

}

.tag::before{

    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:#2ecc71;

}


/*==================================
UPTIME BAR
===================================*/

.uptime-box{

    margin-top:30px;

}

.progress{

    height:12px;

    border-radius:50px;

    overflow:hidden;

    background:
    rgba(255,255,255,.18);

}

.uptime-progress{
    width:99%;
    background: linear-gradient(
    90deg,
    var(--primary),
    var(--primary-soft));
    }


/*==================================
FLOATING BADGES
===================================*/

.floating-card{

    position:absolute;

    background:
    rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    color:#fff;

    padding:12px 18px;

    border-radius:15px;

    font-size:14px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.15);

}

.online{

    top:25px;
    left:30px;

}

.ssl{

    top:35px;
    right:30px;

}

.speed{

    bottom:160px;
    right:35px;

}

.dot{width:10px;height:10px;background: var(--primary);border-radius:50%;display:inline-block;margin-right:8px;}


/*==================================
RIGHT CARD
===================================*/

.alert-card{

    padding:40px;

    background:#F8FAFF;

}

.icon-box{

    width:78px;
    height:78px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    #5C84FF);

    color:#fff;

    font-size:28px;

    margin-bottom:25px;

}

.alert-card h4{

    font-size:32px;

    margin-bottom:15px;

}

.alert-card p{

    color:#6b6b6b;

    line-height:1.8;

}

.alert-card ul{

    list-style:none;

    padding:0;

    margin-top:30px;

}

.alert-card li{

    margin-bottom:15px;

    position:relative;

    padding-left:28px;

}

.alert-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--primary);

    font-weight:700;

}
/*==================================================
 RECOVERY CARD
==================================================*/

.recovery-card{
    padding:40px;
    background:#EEF1FD;
    position:relative;
}

.recovery-card h4{
    font-size:30px;
    margin-bottom:35px;
    color:#16203b;
}

.timeline{
    position:relative;
    padding-left:22px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:6px;
    top:0;
    width:3px;
    height:100%;
    background:linear-gradient(
    to bottom,
    var(--primary),
    rgba(52,87,213,.15));
}

.timeline div{
    position:relative;
    padding-bottom:28px;
    padding-left:22px;
    font-weight:500;
    color:#5f6574;
    transition:.35s;
}

.timeline div:last-child{
    padding-bottom:0;
}

.timeline span{
    position:absolute;
    left:-2px;
    top:4px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 5px rgba(52,87,213,.15);
    transition:.4s;
}

.recovery-card:hover .timeline span{
    transform:scale(1.2);
    box-shadow:0 0 0 10px rgba(52,87,213,.08);
}

.recovery-card:hover .timeline div{
    color:var(--primary-dark);
    transform:translateX(6px);
}


/*==================================================
 ANALYTICS CARD
==================================================*/

.analytics-card{
    background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark));

    color:#fff;
    padding:40px;
    position:relative;
}

.analytics-card h3{
    color:#fff;
    font-size:34px;
    margin:20px 0;
}

.analytics-card p{
    color:rgba(255,255,255,.85);
}

.chart{
    margin-top:35px;
    height:170px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
}

.chart span{
    width:14%;
    border-radius:30px 30px 0 0;
    background:rgba(255,255,255,.22);
    animation:bars 2s ease infinite alternate;
}

.chart span:nth-child(1){height:45%;}
.chart span:nth-child(2){height:75%;}
.chart span:nth-child(3){height:60%;}
.chart span:nth-child(4){height:95%;}
.chart span:nth-child(5){height:70%;}
.chart span:nth-child(6){height:100%;}

.analytics-card::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    top:-90px;
    right:-90px;
}


/*==================================================
 IMAGE CARD
==================================================*/

.image-card{
    position:relative;
    overflow:hidden;
    height:100%;
    min-height:260px;
}

.image-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s;
}

.image-card:hover img{
    transform:scale(1.08);
}

.team-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(20,30,60,.75),
        rgba(20,30,60,.08));

    display:flex;
    align-items:flex-end;
    padding:30px;
}

.team-overlay h5{
    color:#fff;
    font-size:24px;
    margin-bottom:6px;
}

.team-overlay p{
    color:rgba(255,255,255,.85);
}


/*==================================================
 SHIMMER EFFECT
==================================================*/

.feature-card::after{
    content:"";
    position:absolute;
    top:-150%;
    left:-120%;
    width:60%;
    height:300%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent);

    transform:rotate(25deg);
    transition:1s;
}

.feature-card:hover::after{
    left:170%;
}


/*==================================================
 FLOATING BADGES
==================================================*/

.online{
    animation:float 4s ease-in-out infinite;
}

.ssl{
    animation:float 5s ease-in-out infinite;
}

.speed{
    animation:float 4.5s ease-in-out infinite;
}


/*==================================================
 ICON HOVER
==================================================*/

.icon-box{
    transition:.45s;
}

.feature-card:hover .icon-box{
    transform:rotate(-10deg) scale(1.08);
}


/*==================================================
 PULSE DOT
==================================================*/

.dot{
    animation:pulseDot 2s infinite;
}


/*==================================================
 KEYFRAMES
==================================================*/

@keyframes float{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }

}

@keyframes pulseDot{

    0%{
        box-shadow:0 0 0 0 rgba(46,204,113,.5);
    }

    70%{
        box-shadow:0 0 0 12px rgba(46,204,113,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(46,204,113,0);
    }

}

@keyframes bars{

    from{
        transform:scaleY(.8);
    }

    to{
        transform:scaleY(1);
    }

}


/*==================================================
 RESPONSIVE
==================================================*/

@media(max-width:1200px){

.dashboard-box{
    max-width:470px;
}

.dashboard-box h3{
    font-size:32px;
}

}

@media(max-width:992px){

.monitoring-card{
    height:380px;
}

.dashboard-box{
    left:25px;
    bottom:25px;
    max-width:90%;
}

.dashboard-box h3{
    font-size:28px;
}

.alert-card,
.analytics-card,
.recovery-card{
    padding:30px;
}

.chart{
    height:140px;
}

}

@media(max-width:768px){

.section-title h2{
    font-size:34px;
}

.monitoring-card{
    height:330px;
}

.dashboard-box h3{
    font-size:24px;
}

.dashboard-box p{
    font-size:15px;
}

.floating-card{
    display:none;
}

.alert-card h4,
.recovery-card h4{
    font-size:26px;
}

.analytics-card h3{
    font-size:28px;
}

.team-overlay{
    padding:20px;
}

}

@media(max-width:576px){

.feature-card{
    border-radius:22px;
}

.dashboard-box{
    left:20px;
    right:20px;
    bottom:20px;
}

.dashboard-box h3{
    font-size:22px;
}

.tag{
    font-size:13px;
    padding:8px 16px;
}

.chart{
    height:120px;
}

.icon-box{
    width:65px;
    height:65px;
    font-size:24px;
}

}


/* ====================================
About Us Page
==================================== */
/*==================================================
      UPTIMECORE PAGE BANNER
==================================================*/

.ucore-page-banner{

    position:relative;

    overflow:hidden;

    padding: 7rem 0 6rem;

    background: url(../img/breadcrumb.jpg) no-repeat center center;
	background-size: cover;

}

/*=========================
Glow Effects
=========================*/

.ucore-banner-glow{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.18;

}

.glow-left{
	
    background:#3457D5;

    left:-180px;

    top:-120px;

}

.glow-right{
	
    background:#4FC3F7;

    right:-120px;

    bottom:-180px;

}

/*=========================
Content
=========================*/

.ucore-banner-content{

    position:relative;

    z-index:2;

    text-align:center;

}

.ucore-mini-title{

    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    color:#9CC3FF;

    font-size:14px;

    letter-spacing:1px;

    font-weight:600;

    text-transform:uppercase;

    margin-bottom:25px;

}

.ucore-banner-content h1{

    color:#fff;

    font-size:64px;

    font-weight:700;

    margin-bottom:28px;

    letter-spacing:-1px;

}

/*=========================
Breadcrumb
=========================*/

.ucore-breadcrumb{

    display:inline-flex;

    align-items:center;

    gap:14px;

    list-style:none;

    margin:0;

    padding:14px 28px;

    border-radius:60px;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

}

.ucore-breadcrumb li{

    color:#BFD4FF;

    font-size:16px;

    font-weight:500;

}

.ucore-breadcrumb li a{

    text-decoration:none;

    color:#ffffff;

    transition:.35s;

}

.ucore-breadcrumb li a:hover{

    color:#69A5FF;

}

.ucore-breadcrumb i{

    font-size:13px;

    color:#6E8EC9;

}

.ucore-breadcrumb .active{

    color:#69A5FF;

    font-weight:600;

}

/*=========================
Hover Animation
=========================*/

.ucore-page-banner:hover .glow-left{

    transform:translate(-25px,-20px);

    transition:3s ease;

}

.ucore-page-banner:hover .glow-right{

    transform:translate(25px,20px);

    transition:3s ease;

}

/*=========================
Responsive
=========================*/

@media(max-width:991px){

.ucore-page-banner{

padding:140px 0 80px;

}

.ucore-banner-content h1{

font-size:48px;

}

}

@media(max-width:767px){

.ucore-page-banner{

padding:120px 0 70px;

}

.ucore-banner-content h1{

font-size:36px;

}

.ucore-breadcrumb{

padding:12px 18px;

gap:10px;

}

.ucore-breadcrumb li{

font-size:14px;

}

.ucore-mini-title{

font-size:12px;

padding:8px 16px;

}

}
/*==============================
CONTACT SHOWCASE
==============================*/

.wu-contact-showcase{

    background:#fff;

}

.wu-subtitle{

    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

    background:#EEF1FD;

    color:#3457D5;

    font-weight:600;

    margin-bottom:20px;

}

.wu-title{

    font-size:52px;

    font-weight:700;

    margin-bottom:20px;

}

.wu-title span{

    color:#3457D5;

}

.wu-description{

    max-width:650px;

    margin:auto;

    color:#64748B;

}

/*==============================*/

.wu-contact-box{

    position:relative;

    overflow:hidden;

    height:460px;

    border-radius:28px;

    cursor:pointer;

    transition:.55s;

    box-shadow:0 30px 60px rgba(0,0,0,.08);

}

.wu-contact-box:hover{

    transform:translateY(-12px);

}

/* Image */

.wu-bg{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;

}

.wu-contact-box:hover .wu-bg{

    transform:scale(1.12);

}

/* Overlay */

.wu-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    to top,

    rgba(8,18,45,.92),

    rgba(52,87,213,.45),

    rgba(52,87,213,.10)

    );

    transition:.6s;

}

.wu-contact-box:hover .wu-overlay{

    background:

    linear-gradient(

    to top,

    rgba(8,18,45,.70),

    rgba(52,87,213,.25),

    transparent

    );

}

/* Content */

.wu-content{

    position:absolute;

    left:35px;

    right:35px;

    bottom:35px;

    color:#fff;

    transition:.55s;

}

.wu-contact-box:hover .wu-content{

    transform:translateY(-18px);

}

.wu-content small{

    display:block;

    color:#DCE7FF;

    font-size:15px;

    margin-bottom:10px;

}

.wu-content h4{

   color: #ffffff;
    font-size: 24px;
    margin-bottom:18px;

    font-weight:700;

}

.wu-content p{

    color:rgba(255,255,255,.88);

    line-height:1.8;

}

/* Icon */

.wu-icon{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#fff;

    margin-bottom:25px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(16px);

    transition:.5s;

}

.wu-contact-box:hover .wu-icon{

    background:#fff;

    color:#3457D5;

    transform:rotate(-10deg) scale(1.08);

}

/* Animated Border */

.wu-contact-box::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    padding:1px;

    background:linear-gradient(

        135deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    opacity:0;

    transition:.45s;

}

.wu-contact-box:hover::before{

    opacity:1;

}

/* Shine Effect */

.wu-contact-box::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-100%;

    width:60%;

    height:300%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:rotate(25deg);

}

.wu-contact-box:hover::after{

    left:180%;

    transition:1.2s;

}

/* Responsive */

@media(max-width:991px){

.wu-contact-box{

height:400px;

}

.wu-title{

font-size:40px;

}

}

@media(max-width:768px){

.wu-title{

font-size:32px;

}

.wu-contact-box{

height:360px;

}

.wu-content{

left:25px;

right:25px;

bottom:25px;

}

.wu-content h4{

font-size:24px;

}

}

/*==================================================
CHECKOUT PAGE
==================================================*/

.checkout-area{
    padding:5rem 0;
    background:
    radial-gradient(circle at top right,#EEF1FD 0%,transparent 35%),
    radial-gradient(circle at bottom left,#EEF1FD 0%,transparent 35%),
    #F8FAFF;
}

/*==================================
Heading
==================================*/

.checkout-subtitle{

    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 22px;
    background:#EEF1FD;
    color:#3457D5;
    border-radius:50px;
    font-weight:600;
    font-size:15px;
    margin-bottom:18px;

}

.checkout-header h2{

    font-size:48px;
    font-weight:700;
    color:#0F172A;
    margin-bottom:18px;

}
.checkout-header span{
	color: var(--primary);
}
.checkout-header p{

    color:#64748B;
    font-size:17px;
    max-width:650px;
    margin:auto;
    line-height:1.8;

}

/*==================================
Cards
==================================*/

.checkout-card{

    background:#fff;
    border-radius:24px;
    padding:45px;
    border:1px solid rgba(52,87,213,.08);
    box-shadow:0 25px 60px rgba(18,38,63,.05);
    transition:.4s;

}

.checkout-card:hover{

    transform:translateY(-5px);
    box-shadow:0 35px 70px rgba(52,87,213,.10);

}

/*==================================
Title
==================================*/

.card-title{

    display:flex;
    align-items:center;
    gap:15px;
    font-size:24px;
    font-weight:700;
    color:#0F172A;
    margin-bottom:35px;

}

.card-title i{

    width:55px;
    height:55px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#EEF1FD;
    color:#3457D5;
    font-size:24px;

}

/*==================================
Inputs
==================================*/

.checkout-card label{

    font-size:15px;
    font-weight:600;
    color:#334155;
    margin-bottom:10px;

}

.form-control,
.form-select{

    height:60px;
    border-radius:16px;
    border:1px solid #DCE4F6;
    background:#FAFBFF;
    font-size:16px;
    padding:15px 18px;
    transition:.35s;
    box-shadow:none;

}

.form-control:focus,
.form-select:focus{

    border-color:#3457D5;
    background:#fff;
    box-shadow:0 0 0 4px rgba(52,87,213,.10);

}

.form-control::placeholder{

    color:#94A3B8;

}

/*==================================
Payment Logos
==================================*/

.payment-icons{

    display:flex;
    gap:15px;
    margin-bottom:25px;

}

.payment-icons img{

    width:58px;
    background:#fff;
    padding:10px;
    border-radius:12px;
    border:1px solid #E5ECFD;
    transition:.4s;

}

.payment-icons img:hover{

    transform:translateY(-6px);
    box-shadow:0 12px 25px rgba(52,87,213,.15);

}

/*==================================
ORDER SUMMARY
==================================*/

.order-summary{

    position:sticky;
    top:120px;
    background:#fff;
    border-radius:28px;
    padding:35px;
    border:1px solid rgba(52,87,213,.08);
    box-shadow:0 30px 60px rgba(18,38,63,.06);

}

.summary-header{

    padding-bottom:25px;
    border-bottom:1px solid #EEF1FD;
    margin-bottom:25px;

}

.summary-header h4{

    font-size:28px;
    font-weight:700;
    color:#0F172A;

}

.selected-plan{
	text-align: center;
    background:#EEF1FD;
    padding:22px;
    border-radius:18px;
   

}

.selected-plan span{

    color:#3457D5;
    font-size:14px;
    font-weight:600;

}

.selected-plan h5{

    margin-top:8px;
    font-size:24px;
    font-weight:700;

}

/*==================================
PRICE
==================================*/

.price-box{

   
    color: var(--primary);
    padding:20px;
    text-align:center;
   

}

.price-box span{

    font-weight: 700;
	font-size: 22px;

}

.price-box h3{

    font-size:42px;
    margin:10px 0 0;
    font-weight:700;

}

.price-box small{

    font-size:18px;

}

/*==================================
TERMS
==================================*/

.terms-check{

    margin-top:28px;

}

.form-check-input{

    width:22px;
    height:22px;

}


.form-check-label{

    margin-left:10px;
    color:#64748B;
    line-height:1.8;

}
.form-check-input:checked{

    background-color:#3457D5;

    border-color:#3457D5;

    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='white' d='M16.707 5.293a1 1 0 00-1.414 0L8.5 12.086 5.707 9.293a1 1 0 10-1.414 1.414l3.5 3.5a1 1 0 001.414 0l7.5-7.5a1 1 0 000-1.414z'/%3e%3c/svg%3e");

}

/*==================================
BUTTON
==================================*/

.checkout-btn{

    height:62px;
    border:none;
    border-radius:16px;
    background:linear-gradient(135deg,#3457D5,#4E74FF);
    color:#fff;
    font-size:18px;
    font-weight:700;
    transition:.4s;

}

.checkout-btn:hover{

    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(52,87,213,.25);

}

.checkout-btn i{

    margin-right:10px;

}

.secure-payment{

    text-align:center;
    margin-top:22px;
    color:#16A34A;
    font-weight:600;

}

/*==================================
Responsive
==================================*/

@media(max-width:991px){

.checkout-header h2{

font-size:36px;

}

.checkout-progress{

display:none;

}

.checkout-card{

padding:30px;

}

.order-summary{

margin-top:40px;
position:relative;
top:0;

}

}

@media(max-width:576px){

.checkout-card{

padding:22px;

}

.checkout-header h2{

font-size:30px;

}

.card-title{

font-size:22px;

}

.form-control,
.form-select{

height:55px;

}

.price-box h3{

font-size:34px;

}

}

/*==================================================
THANK YOU PAGE
==================================================*/

.thankyou-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:
    radial-gradient(circle at top right,#EEF1FD 0%,transparent 35%),
    radial-gradient(circle at bottom left,#EEF1FD 0%,transparent 35%),
    #F8FAFF;
}

/* Floating Blobs */

.thankyou-section::before{

    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(52,87,213,.08);
    top:-100px;
    right:-120px;
    filter:blur(40px);

}

.thankyou-section::after{

    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:#EEF1FD;
    left:-80px;
    bottom:-80px;
    filter:blur(30px);

}

/*=============================
Hero Card
=============================*/

.success-card{

    position:relative;
    background:#fff;
    padding:70px 50px;
    border-radius:32px;
    border:1px solid rgba(52,87,213,.08);
    box-shadow:0 35px 70px rgba(18,38,63,.06);

}

.success-card h1{

    font-size:52px;
    font-weight:700;
    color:#0F172A;
    margin:25px 0;

}

.success-card p{

    color:#64748B;
    font-size:18px;
    max-width:680px;
    margin:auto;
    line-height:1.8;

}
/*=============================
Success Icon
=============================*/

.success-icon{

    width:130px;
    height:130px;
    margin:auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
    linear-gradient(135deg,#3457D5,#6E8DFF);
    color:#fff;
    font-size:62px;
    position:relative;

    animation:pulse 2.5s infinite;

}

.success-icon::before{

    content:"";
    position:absolute;
    inset:-15px;
    border-radius:50%;
    border:2px solid rgba(52,87,213,.25);

}

.success-badge{

    display:inline-flex;
    margin-top:30px;
    padding:10px 22px;
    border-radius:50px;
    background:#EEF1FD;
    color:#3457D5;
    font-weight:600;

}

/* Pulse */

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

#my-widget-popup {
    top: auto !important;
    bottom: 20px !important;
}

#widget-content {
    bottom: 0px !important;
    top: auto !important;
}