@media (min-width: 1600px){
	.container{max-width: 1440px;}
}

@media (max-width: 1400px){
	.loginWith.paymentBtn{flex-flow: column; align-items: flex-end;}
	.planField.paymentMethods{align-items: flex-start;}
}

@media (max-width: 1199px){
	:root{
	--size_H1:24px;
	--line_H1:30px;

	--size_H3:30px;
	--line_H3:40px;

	--size_H4:20px;
	--line_H4:30px;

	--size_H5:18px;
	--line_H5:24px;

	--size_SubHead:16px;
	--line_SubHead:26px;

	/* Body Text */
	--size_default:14px;
	--line_default:24px;

	--size_List:14px;
	--line_List:24px;

	--size_Small:11px;
	--line_Small:13px;
	}

	.plans{padding: 24px 18px;}
	.headerRight .goLive{padding:6px 16px;}
	.welcome .infoCard span{font-size: 30px;line-height: 30px;}
	.heroImage h1{font-size: 60px;line-height: 70px;}
	.heroImage h4{font-size: 34px;line-height: 44px;}
	.subscriptioPlans:before{transform: translateY(-45%);}
	

	section {padding:70px 0;}
}
@media (max-width: 1024px){
	section {padding:50px 0;}
	.subscriptioPlans{padding:50px 0;}
	.brandLogo {width: 95px;}
	.headerRight {gap: 12px;}
	#toggleMenu{display: inline-block; z-index: 99999;}
	.headerRight nav{position: fixed; top:0; right:0; bottom: 0; background: var(--primary); z-index: 9999; transform: translate(100%); align-items: start; padding-top: 65px; transition: var(--animation)}
	body.openMenu .headerRight nav{transform: translate(0%);}

	.headerRight nav ul{flex-flow: column; gap: 2px; width: 300px;}
	.headerRight nav ul li{width: 100%;}
	.headerRight nav ul li a{padding:12px 18px;width: 100%;}
	.headerRight nav ul li a:before,
	.headerRight nav ul li a:after{display: none;}
	body .heroImage .goLive a.btn{font-size: 20px;line-height: 24px;padding: 6px 20px;}
}

@media (max-width: 991px){
:root{
	--size_H1:22px;
	--line_H1:28px;

	--size_H3:28px;
	--line_H3:38px;

	--size_H4:18px;
	--line_H4:28px;

	--size_H5:16px;
	--line_H5:22px;
}
body .heroImage .goLive a.btn{font-size:18px;line-height: 22px;padding: 4px 16px;}
section {padding:40px 0;}
	.heroImage h3{padding-top: 50px;}
	.heroImage .goLive{justify-content: center;}
	.welcome .col-lg-4:has(.infoCard){margin:6px 0;}
	.welcome .col-lg-3:has(.infoCard){margin:6px 0;}
	.appDownload{align-items: center;}
	.appDownload h4{padding-top: 0; padding-bottom: 12px;}
	.contactUs .socialMedia .links{padding: 12px;}
	.socialMedia .links a{width: 40px; height: 40px;}
	.loginImg{margin-bottom: 30px;}
	.verticalNav.frame .leftSide{height: auto !important;}
	.verticalNav .leftSide ul.nav-tabs{flex-flow: row; padding: 10px 0 10px 0;}
	.dropdown.user button.btn{font-size: 0; min-width: auto; gap: 0px;}
	.dropdown-toggle::after{font-size: 14px;}
	.bannerImage:after{width: 150px;}
	.bannerImage:before{width: 70px;}
	.bannerImageMain:after{width: 60px;}
	.dropdown.user button.btn span.userName{display:none;}
	.verticalNav.frame .leftSide:before{border-radius: 18px 18px 0 0;}
	.dark .sectionHeading h3{padding-top:10px ;text-align: center;}
}
@media (max-width:767px){
	.tab-pane#linkedAccount .formHeading .linkedAccount {
		flex-flow: column;
	}
	.bannerImage:after{width: 120px;}
	.bannerImage:before{width: 50px;}
	.bannerImageMain:after{width: 40px;}
	section {padding:30px 0;}
	.verticalNav ul.nav-tabs li.nav-item button.nav-link{flex-flow: column;}
	.verticalNav ul.nav-tabs li.nav-item button.nav-link i {width: 28px;height: 28px;}
	.heroImage h3{font-size: 26px;line-height: 36px;}
	.heroImage h1{font-size: 50px;line-height: 60px;}
	.heroImage h4{font-size: 30px;line-height: 40px;}

	:root{
		--size_H1:20px;
		--line_H1:26px;
	
		--size_H3:26px;
		--line_H3:36px;

	}
	section.GoLivePage:before, section.LoginRegister:before, section.contactUs:before,
	section.GoLivePage:after, section.LoginRegister:after, section.contactUs:after{width:50%;}
	
}

@media (max-width: 575px){

	.verticalNav .leftSide ul.nav-tabs {
        flex-flow: wrap;
        padding: 10px 0 10px 0;
    }

	.bannerImage:after{width: 90px;}
	.bannerImage:before{width: 40px;}
	.bannerImageMain:after{width: 30px;}
	section {padding:20px 0;}

	:root{
		--size_H1:18px;
		--line_H1:24px;
	
		--size_H3:24px;
		--line_H3:34px;

	}
	.subscriptioPlans {padding: 40px 24px;}
	.verticalNav ul.nav-tabs li.nav-item button.nav-link{flex-flow: wrap;}
	.owl-item.center .plans:after{left:0px; right: 0px; top: 0px; bottom: 0px; box-shadow: var(--shadowDark);}

	.heroImage h3{font-size: 18px;line-height: 28px;}
	.heroImage h1{font-size: 40px;line-height: 50px;}
	.heroImage h4{font-size: 20px;line-height: 30px;}
	body .heroImage .goLive a.btn{font-size:16px;line-height: 20px;padding: 4px 12px;}
	.heroImage .goLive{flex-flow: column; padding:20px 0;}
	.planField.paymentMethods { align-items: center; flex-flow: column;}
	.loginWith.paymentBtn{align-items: center;}

	.accordion-item .heading{flex-flow: wrap; gap:0; padding-right: 0;}
	.accordion-item .heading .accordionHeading{flex-basis: 100%; padding-bottom: 6px; gap:2px;}
	.accordion-item .heading .price{padding:0 12px 12px 12px;}
	body .accordion-item .heading a.btn{margin-right: 12px; margin-bottom: 12px;}
	.accordion-item .heading .accordionHeading i{opacity: 1;}
	.ExpandableText--truncated{text-align: center;}
	footer.footer{padding:12px 0;}
	footer.footer .container{flex-flow: column; justify-content: flex-start; gap:12px;}
	footer.footer .container p{width: 100%; text-align: center;}
	.topHeader{padding: 12px 0;}
	.narrow .brandLogo {
		width: 75px;
	}
	.brandLogo {
        width: 75px;
    }
	ul.nav-tabs li.nav-item button.nav-link{padding: 10px 10px; min-width: 80px;}
	.btnRadioCheck .checkRadio input[type="radio"] ~ label, .btnRadioCheck .checkRadio input[type="checkbox"] ~ label{padding: 5px 11px;}
	.appDownload .btnWrapper a{width: 130px;}
	.thankYouPage .tickIcon {
		width: 100px;
		height: 100px;
	}
}

@media (max-width: 460px){
	.subscriptioPlans {padding:30px 24px;}
	.planField.paymentMethods label{text-align: center; padding-bottom: 12px;}
	.paymentBtn{flex-flow: column;}
}