:root {
--red: #e11f26;
--black: #181617;
--blue:#2A64F6;
--perple:#A935FF;
--pink:#E72578;
--green:#099E44;
	--white:#ffffff;
	--gray:#646464;
	--bg_sprit: url(https://www.stellarinfo.com/images/dr-free/sprit-bg.png);
}
@font-face {font-family: 'rupee_foradianregular';src: url(/font/rupee_foradian-webfont.woff2) format('woff2'), url(/font/rupee_foradian-webfont.woff) format('woff');font-weight: 400;font-style: normal}
.rupee {font-family: 'rupee_foradianregular';font-style: normal;padding-right: 4px;font-size: 90%}

.gradient_text_1{background: linear-gradient(90deg, #2A64F6 1.53%, #A935FF 44.7%, #E72578 94.62%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;}
.gradient_text_1  sup{font-size: 50%; -webkit-text-fill-color: #7747fb;color: #7747fb}
.globle_h{font-size: 42px}
.text-gray{color: var(--gray)}
.check_box_list{ display: flex; padding-left: 0; justify-content: center; align-items: center; column-gap: 1.5rem; list-style: none; margin-top: 1rem; color: #646464}
.check_box_list li{position: relative; padding-left: 1.5rem}
.check_box_list li:after{content: "";display: block;width: 4px;height: 8px;border: solid var(--green);border-width: 0 2px 2px 0;transform: rotate(45deg);position: absolute;top: 6px;left:6px;z-index: 1;}
main{overflow: hidden}
main{position: relative}
header{position: sticky; top: 0}

main header:before, main header:after{ filter: blur(4rem); transform: scale(1.5); opacity: .4; }
main header:before{ width: 150px; height: 150px; background: var(--pink); content: ''; border-radius: 100px; position: absolute;   top:2rem; right: -3rem}
main header:after{ width: 150px; height: 150px; background: var(--pink); content: ''; border-radius: 100px; position: absolute;  top:2rem; left: -3rem; z-index:-1}

main .hero_sec:before, main .hero_sec:after{ filter: blur(4rem); transform: scale(1.5); opacity: .4;}

main .hero_sec:before{ width: 150px; height: 150px; background: var(--blue); content: ''; border-radius: 100px; position: absolute;   top:25rem; right: -3rem}
main .hero_sec:after{ width: 150px; height: 150px; background: var(--blue); content: ''; border-radius: 100px; position: absolute;   top:25rem; left: -3rem}
 

/* Pricing Section*/ 
.check_box_list li:before{width: 16px;height: 16px;border-radius: 16px;background: var(--white);position: absolute;left: 0;margin: auto;content: '';top: 3px;z-index: 0; border: solid 1px var(--green)} 
.pricing-card {position: relative;border-radius: 16px; border: 1px solid transparent;background: linear-gradient( 160deg, #E0F2FF -25%, #ffffff 70%) padding-box, linear-gradient(180deg, #99C4E9, #E0F2FF) border-box;transition: transform 0.4s ease, opacity 0.4s ease;height: 100%;  }
.pricing-card  h3{font-size: 22px}
.pricing-card  p{font-size: var(--fs-base); text-align: left; padding-top: 1rem}
.offer_price sup{ font-size:55%}
.pricing-card.card-active {background:linear-gradient(180deg, #FFF3F3, #ffffff) padding-box, linear-gradient(
142deg, #FFC2C4, #865E5F) border-box;transform: translateY(-10px);box-shadow: 0 15px 35px rgba(51, 51, 255, 0.2);}
  
.card-switching { opacity: 0; transform: translateY(20px); }
 
  
.best-value { display: inline-flex; background: linear-gradient(142deg, #FFC2C4, #865E5F) ; border-radius: 29px; padding: 1px;box-shadow: -2px 1px 4px -1px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center}
 .best-value i {padding:4px 15px;background: linear-gradient(90deg, #FBD5D6 0%, #FFFFFF 87.93%);border-radius: 28px; color: #333333; font-size: 13px; position: relative; font-style: normal}
.best-value:before { background:conic-gradient(from 118deg, #ffffff00 70%, #ffffff00 80%, #020202 100%); position: absolute; width: 100%; height: 100%; left: 0; top:0; content: ''; z-index: 0;animation: spin 3s linear infinite;}


.price_container{ display: flex; flex-direction: column; text-align: left}
.price_container .cross_price .old-price { text-decoration: line-through; color: #FF565C; font-family:var(--font-mont); font-size: 16px;}
.price_container .cross_price  .save-badge { font-size: 11px; background:#B5E9CA; color: #00424F; padding: 3px 10px; border-radius: 20px; border: solid 1px #80DBA4; font-weight: 600}
.offer_price{ display: flex; align-items: flex-end; font-family:var(--font-mont); margin-top: 1rem }
.offer_price .currency{ display: flex; font-size: 20px; font-family:var(--font-mont);  margin-bottom: 5px; margin-right: 3px }
.offer_price .price-val{ font-size: 42px; font-weight: 700; font-family:var(--font-mont);}
.offer_price .plan{ font-size: 14px; color: #646464; margin-bottom: 5px;}
.pricing-card  .btn-buy{ width: 220px; height: 53px; display: flex; justify-content: center; align-items: center;
	 background: linear-gradient(180deg, #ffffff, #ffffff) padding-box, linear-gradient(60deg, #FE1BBA, #6647F0, #0192FF) border-box; border: solid 1px transprent; font-size: var(--fs-xxlarge);font-family:var(--font-mont);  font-weight: 700; column-gap: 10px}
 
.pricing-card.card-active  .btn-buy{ background: linear-gradient(60deg, #FE1BBA, #6647F0, #0192FF);border: none; color: #fff }
.pricing-card.card-active  .btn-buy img{filter: brightness(0) invert(1)}
.hero_sec  .form-check-input{ width: 22px; height: 22px; border-width: 1px; margin-bottom: 1px; border-color: #181617; }
.hero_sec  .form-check-input:checked{background-color: #181617; box-shadow: none; background-image: url('https://www.stellarinfo.com/public/frontEnd/wdrbuy_v3/images/radio_check.svg')}
.hero_sec  .form-check{ display: flex; align-items: center; column-gap: 8px;  cursor: pointer}
.hero_sec .form-check-input:hover, .hero_sec  label:hover{cursor: pointer}
 .pricing-card.card-active .feature-list li{color: #555}
 .price_container ~ p{font-size: 15px}
 .feature-list { list-style: none; padding: 0; font-size:14px; color: #616570; text-align: left; display: flex; flex-direction: column; row-gap:14px; }
.info-icon { margin-right: 10px; color: #616570; }
.feature-list li{position: relative; display: flex; align-items: flex-start; column-gap: 8px}
.hero_sec  .form-check span{color: var(--green); font-style: italic}

.mute_text{font-size: 13px; color: #2F5795; display: inline-block; padding-top: 10px; margin-bottom: 1rem}
 
.feature-list li span{ position: absolute; width: 150px; background: #181617;   visibility: hidden; opacity: 0; transform:  translateY(10px); padding: 10px; transition: ease-in-out .3s; left: -2rem; top: 30px; font-size: 12px; border-radius: 5px; z-index: 5; color: #f1f1f1}
.feature-list li span:before{ width: 15px; height: 15px; background: #181617; content: ''; position: absolute; transform: rotate(41deg); top: -4px;z-index: -1;left: 2rem;}
.feature-list li img{position: relative; transform: scaleY(-1); top:3px;}
.feature-list li img:hover ~ span{ visibility: visible; transform: translateY(0); opacity: 1}

 

.black_gradient_text{letter-spacing: -2.1px;background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 37.53%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 62.47%, rgba(255, 255, 255, 0) 100%), #202020;
-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;}

.compare_btn{display: flex; justify-content: center; align-items: center;	 background: linear-gradient(180deg, #ffffff, #ffffff) padding-box, linear-gradient(60deg, #FE1BBA, #6647F0, #0192FF) border-box; border: solid 2px transparent; font-size: var(--fs-xxlarge);font-family:var(--font-mont);  font-weight: 700; color: #181617; padding: .8rem 2.5rem; margin-top:2rem; border-radius: 5px; transition: ease-in-out .3s  }
.compare_btn:hover{ background:  linear-gradient(60deg, #FE1BBA, #6647F0, #0192FF); color: #fff; border-color:  #fff}

.logo-slider {width: 100%;overflow: hidden; position: relative}
.logo-slider:before{ width: 200px; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(90deg, #ffffff 0% , #ffffff00 100%); content: ''}
.logo-slider:after{ width: 200px; height: 100%; position: absolute; right: 0; top: 0; background: linear-gradient(270deg, #ffffff 0% , #ffffff00 100%); content: ''}
 .logo-track {display: flex;width: max-content; /* Grows based on content */align-items: center; column-gap: 1rem}

.logo-track img { max-width: 100%;}

 
.custom-faq .accordion-item {border: 1px solid #C5D6FF;border-radius: 6px !important;margin-bottom: 1rem;background-color: #ffffff;transition: all 0.3s ease;overflow: hidden; padding: .5rem 0 }
.custom-faq .accordion-item:has(.show) {border: 1px solid transparent !important;background:linear-gradient(180deg, #ffffff, #ffffff) padding-box,linear-gradient(180deg, #FE1BBA, #6647F0, #0192FF) border-box;box-shadow: 0 10px 20px rgba(102, 71, 240, 0.1); }
 .custom-faq .accordion-button {font-weight: 700;color: #1a202c;background-color: transparent !important;padding: 1.25rem 1.5rem;box-shadow: none !important; font-size: 18px}
.custom-faq .accordion-button:not(.collapsed) {color: #181617}
.custom-faq .accordion-body {padding: 0 1.5rem 1.5rem 1.5rem;color: #4a5568;line-height: 1.6; padding-right: 3rem}
.custom-faq .accordion-button::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");background-size: 1.5rem;width: 1.5rem;height: 1.5rem; transform: scale(1.5)}
.custom-faq .accordion-button:not(.collapsed)::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");transform: none; transform: scale(1.5)}
.faq_sec{background: linear-gradient(179.44deg, rgba(255, 255, 255, 0.32) 12.47%, rgba(161, 214, 255, 0.32) 38.05%, rgba(255, 255, 255, 0.32) 84.38%);
 }


.counter_text{list-style:none;display:flex;justify-content:space-around;margin-bottom:0;width:100%; padding-left: 0}
.counter_text li{text-align:center;margin:1rem auto}
.counter_text li .gtext{background: linear-gradient(90deg, #e72578, 50%, #2a64f6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent}
.counter_text .counter_h span{font-size:42px;font-weight:600;font-family:'Montserrat'}
.counter_text .counter_h span sup{font-size:60%;font-weight:600;position:static;vertical-align:revert}.counter_sh{font-size:14px;font-weight:700;text-transform:uppercase}
.counter_text p{margin-bottom:0}
.gtext1{color: #3e5ee9; text-fill-color: #3e5ee9; -webkit-text-fill-color: #3e5ee9;}
.counter_text .counter_h {min-width: 130px}

.trustpilot_container {
	position: relative
}
.trustpilot_container:before {
	width: 1px;
	height: 40px;
	position: absolute;
	content: '';
	left: 2px;
	top: 0;
	bottom: 0;
	margin: auto;
	background: linear-gradient(0deg, #ffffff 0%, #d1d1d1 50%, #ffffff 100%);
}
.trustpilot_container:after {
	width: 1px;
	height: 40px;
	position: absolute;
	content: '';
	right: -5px;
	top: 0;
	bottom: 0;
	margin: auto;
	background: linear-gradient(0deg, #ffffff 0%, #d1d1d1 50%, #ffffff 100%);
}
#defaultImages .trustpilot_rating {
	display: flex;
	column-gap: .5rem
}
.testimonial-container {
	padding-top: 20px;
}
.testimonial-container {
	position: absolute;
	opacity: 0;
	transform: translateY(25px);
	transition: ease-in-out .3s
}
.testimonial-box {
	position: relative;
	max-width: 260px;
	background: #ffffff;
	padding: .8rem;
	border-radius: 8px;
	/* Gradient border trick */
	border: 1px solid transparent;
	background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #4f86f7 0%, #f74f86 50%, #ffe3ec 88%);
	;
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* The Arrow */
.testimonial-box::before {
	content: "";
	position: absolute;
	top: -8px; /* Adjust based on arrow size */
	left: 40px;
	width: 15px;
	height: 15px;
	background: white;
	/* Border matching the top-left of the gradient */
	border-left: 1px solid #4f86f7;
	border-top: 1px solid #4f86f7;
	transform: rotate(45deg);
	z-index: 1;
}
.quote {
	font-style: italic;
	font-size: 14px;
	color: #333;
	margin: 0 0 10px 0;
}
.source {
	font-size: 13px;
	color: #444;
	margin: 0;
}
.source strong {
	font-weight: 800;
}
.pc_mac_img:hover ~ .testimonial-container {
	transform: translateY(0px);
	opacity: 1
}



 #flotingNav {
      width: 100%;
      background-color: #ffffff;
      z-index: 1050;
      transition: background 0.3s ease; backdrop-filter: blur(10px)
    }

    /* 2. The Sticky Class (Triggered by jQuery) */
    #flotingNav.is-sticky {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      animation: slideDown 0.4s ease-out; /* The slide-in effect */
    }

#flotingNav.is-sticky:before, #flotingNav.is-sticky:after{opacity: .2}

 @keyframes slideDown {
      from { transform: translateY(-100%); }
      to { transform: translateY(0); }
    }






  @keyframes spin {
            from {transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }




@media screen and (max-width:1420px){
.feature-list{ font-size:13px}
}
@media screen and (max-width:1280px){
	.glob_lr{padding-left: 1rem; padding-right: 1rem}
}

@media screen and (max-width:1260px){
	.pricing-card{padding: 1rem!important}
	.pricing-card p{font-size: 16px}
	
}@media screen and (max-width:1200px){
	.pricing_modal .modal-header .btn-close{ right: 1rem!important; top: 1rem!important}
	.modal-xl{max-width: calc(100% - 5%)}
	.check_box_list li {padding-left: 1.3rem;}
	
}
@media screen and (max-width:1024px){
	.feature-list li{align-items: flex-start}
	.feature-list li img{margin-top: 8px}
	.offer_price .price-val{font-size: 32px}
	.best-value i{white-space:nowrap}
	.best-value{position: absolute; top: 10px; right: 10px}
	.pricing-card .btn-buy{font-size: 16px}
	.feature-list li span {width: 200px;}
	
}

@media screen and (max-width:991px){
	.pricing-card .btn-buy{ width: max-content}
	.feature-list li img{width: 12px}
	.card-body{padding: 0}
	.pricing-card h3{font-size: 18px; text-align: left}
	.best-value i {    padding: 4px 9px;font-size: 11px;}
	.offer_price .price-val{font-size: 22px}
	.offer_price .currency { margin-bottom: 0}
	.globle_h{font-size: 32px}
	.counter_text{flex-wrap: wrap; padding-left: 0}
	.counter_text li{ width: 33%}
	main header:before, main header:after, main .hero_sec:before, main .hero_sec:after{opacity: .15}
	.check_box_list{flex-wrap: wrap; row-gap:.5rem; justify-content: flex-start}
	.check_box_list li{font-size: 14px}
	.globle_h{font-size: 24px}
	.hero_radio_wrapper{padding-top: 1rem}
	.custom-faq .accordion-button{font-size: 16px;}
	.custom-faq .accordion-button::after, .custom-faq .accordion-button:not(.collapsed)::after{transform: scale(1) translateX(10px) translateY(-8px)}
	.counter_text .counter_h span{font-size: 32px}
	.counter_sh{font-size: 11px} 
	header{position:relative !important}
	header.is-sticky{ position:fixed !important}
	.bottom_footer_container .blank_bgl .collaps{background:url('/public/frontEnd/images/buy/collaps.png') no-repeat center !important}
.bottom_footer_container .blank_bgl .collaps {position: absolute;right: 30px;background-size: 12px;background: url(https://www.stellarinfo.com/image/collaps.png) no-repeat center;width: 16px;height: 10px }
.blank_bgl .diy-box-title {border-bottom: solid 1px #6f6f6f;padding-bottom: 10px }
}
@media screen and (max-width:600px){
.hero_sec label.form-check-label{ font-size:13px}
.feature-list li span{ display:none}
}






