/* CSS Document */

/* Style the slider container */
input[type="range"] {
    width: 100%;
    height: 10px;
    border: none;
    border-radius: 5px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 5px 0;
}

/* Style the slider thumb (handle) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background: #2b68ec;
    border: 2px solid #fff;
    border-radius: 18px;
    cursor: pointer;
    margin-top: -10px;
}

input[type="range"]::-moz-range-thumb {
    margin-top: -10px;
    width: 20px;
    height: 20px;
    background: #3498db;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
}

/* Style the slider track (filled portion) */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    background: #ccc;
    border-radius: 18px;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 10px;
    background: #ccc;
    border-radius: 5px;
}

.toggle-button{
	position: relative;
	display: inline-block;
	width: 300px;
	height: 36px;

}
.toggle-button input{
	opacity: 0;
	width: 0;
	height: 0;
 
}
.toggle-button .knob{
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FFFFFFFF;
	transition:  0.8s;
	border-radius: 18px;
  
}
.toggle-button .knob:before{
	background-color: #2B68EC;
	color: #FFFFFFFF;
	position: absolute;
	content: 'Annual';
	height: 30px;
	width: 150px;
	left: 4px;
	bottom: 4px;
	transition: 0.8s;
	border-radius: 23px;
	display: flex;
	align-items: center;
	justify-content: center;
  

}
.toggle-button input:checked + .knob{
	background-color: #FFFFFFFF;

}
.toggle-button input:focus + .knob{
	box-shadow: 0 0 1px #2196F3;


}
.toggle-button input:checked + .knob:before{
	color: #FFFFFFFF;
	content: 'Monthly';
	background-color: #2B68EC;
	-webkit-transform: translateX(142px);
	-ms-transform: translateX(142px);
	transform: translateX(142px);
 
 }




 .homeh1bl {background: linear-gradient(262deg, #2A68EA -11.79%, #2A68EC 50.93%, #2A68EC 107.39%);  background-clip: text; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

.bg-inv {background-image: url('https://zaharasoftware.com/wp-content/uploads/2023/08/pricingwave.svg'); background-size: cover; background-position:center bottom; background-repeat: no-repeat; height: 850px; margin-top: 150px;}

.pricebox {border-radius: 25px; border: 1px solid #E2E2E2; background: #FFF; 
  box-shadow: 0px 12px 9.1px 0px rgba(0, 0, 0, 0.08), 0px 10px 53.5px 0px rgba(0, 0, 0, 0.04); width: 333px; height: 622px;}

.teams {border-radius: 15px; background: #E86C2A; padding: 12.245px; align-items: center; color: #fff;}
.business {border-radius: 15px; background: #2A68EC; padding: 12.245px; align-items: center; color: #fff;}
.enterpriseplus {border-radius: 15px; background: #fff; padding: 12.245px; align-items: center; color: #9A01A1;}
.enterprise {border-radius: 15px; background: #9A01A1; padding: 12.245px; align-items: center; color: #fff;} 
.pricegradient {background: linear-gradient(180deg, rgba(154, 1, 161, 0.11) 0.04%, rgba(154, 1, 161, 0.00) 97.26%), #FFF;}
.getstarted {border-radius: 13.469px; background: #E6E6E6; border: none; padding: 9px; text-align: center;}
.pupleclr {color: #9A01A1;}
.purpleclr .svg-rect {fill: #9A01A1;}

.teamstab {border-radius: 9.86px 9.86px 0px 0px; background: #E86C2A; padding: 6.5px 30px 6.5px 30px; color: #fff; font-weight: 600; text-align: center;}
.businesstab {border-radius: 9.86px 9.86px 0px 0px; background: #2B68EC; padding: 6.5px 30px 6.5px 30px; color: #fff; font-weight: 600; text-align: center;}
.enterprisetab {border-radius: 9.86px 9.86px 0px 0px; background: #9A01A1; padding: 6.5px 30px 6.5px 30px; color: #fff; font-weight: 600; text-align: center;}

.tblgrey {background-color: #E6E6E6;  height: 40px; padding-left: 30px;}
.bottomline {border-bottom: solid 1px #DDD; font-size: 19px; padding: 12px 0px 12px 20px;  }

.addonbox {border-radius: 15px; border: 1px solid #F1F1F1; background: #FFF; box-shadow: 0px 4px 13.4px 0px rgba(0, 0, 0, 0.10); padding: 18px 24px 18px 9px; width: 100%; }
.feature { border-radius: 11px; background: #001D67; color: #fff; font-weight: 600; font-size: 15px; padding: 12px 20px 12px 20px; white-space: nowrap;}
.nowrap {white-space:nowrap;}
.promobox {background-image: linear-gradient(262deg, #FF8D00 -17.21%, #FFB800 42.49%, #FF8D00 102.2%); border-radius: 30px; color: #fff;}
.promoboxh1 {font-size: 23px; font-weight: 600; line-height: 24px; color: #F3BF34;}
.promotext {padding: 0px 30px 30px 30px; width: 80%;}
.tagline {font-size: 41px; font-weight: 600; background: linear-gradient(90deg, #F3BF34 0%, #F90 49.07%, #F3BF34 103.3%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 20px;}
.euros {border-radius: 15px; background-color: #DDD; padding: 12px; height: 35px; font-size: 15px; font-weight: 300;}
.eurotop {margin-top: 100px;}

@media (max-width:1210px){
.eurotop {margin-top: 1000px;}
}




@media (max-width:768px){
.nowrap {white-space:normal; line-height: 40px;}
.addonbox {margin-left: 30px;}
.pricebox {height: 600px; margin-bottom: 30px; margin-left: 0px; width: 99%; margin-top: 30px;}
.mobytop {margin-top: 1850px;}
.bg-inv {width: 100%;}
.dotsblue {margin-top: 100px;}
.promobox {margin-top: 10px;}
.tagline {margin-top: 10px; line-height: 40px;}
.promotext{ width: 100%;}
.promoboxh1 {line-height:36px; text-align: center; border: none; font-size: 24px; font-weight: 600;}
.eurotop {margin-top: 3000px;}
}


.modal-dialog{margin: 0 auto; max-width: 950px;}
.modal-content {width: 950px; margin-top: 90px; border-radius: 14px; }
.modal-body {width: 950px;}

.btn-send {border-radius: 4px; background: #001F5F; padding: 4px; width: 130px; color: #fff; border: solid 1px #001F5F;}

.flipswitch {
  position: relative;
  width: 91px;
}
.flipswitch input[type=checkbox] {
  display: none;
}
.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #FFFFFF;
  border-radius: 45px;
}
.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before, .flipswitch-inner:after {
  float: left;
  width: 50%;
  height: 28px;
  padding: 0;
  line-height: 28px;
  font-size: 14px;
  color: white;
  box-sizing: border-box;
}
.flipswitch-inner:before {
  content: "No";
  padding-left: 12px;
  background-color: #AEC5FF;
  color: #FFFFFF;
}
.flipswitch-inner:after {
  content: "Yes";
  padding-right: 12px;
  background-color: #EBEBEB;
  color: #4e4c4c;
  text-align: right;
}
.flipswitch-switch {
  width: 30px;
  height: 30px;
  margin: 0px;
  background: #2B68EC;
  border-radius: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 61px;
  border: 2px solid #fff;
  transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
  margin-left: 0;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
  right: 0;
}

input[type="text"] {border-radius: 8.407px;
  border: 1px solid #E8E8E8; background: #F6F6F6; font-weight: 500; font-size: 14px; height: 45px;}

input[type="email"] {border-radius: 8.407px;
    border: 1px solid #E8E8E8; background: #F6F6F6; font-weight: 500; font-size: 14px; height: 45px;} 

  @media only screen and (min-width: 820px) and (max-width: 850px) {
    .mobytop {margin-top: 1500px}
    .pricebox {width: 500px }
    
  }

  @media only screen and (min-width: 769px) and (max-width: 1190px) {
    .pricebox {width:310px; height: 620px; }
    .tabht {margin-top: 57px;}
    .hideaccurate {display: none;}
  
  }

  @media only screen and (min-width: 780px) and (max-width: 850px) {
    .mobytop {margin-top: 1600px;}
    .pricebox {width: 500px;margin-left: 100px; margin-bottom: 50px;}
   
  }

  label {margin-bottom: 0px;}

  .btn-solid-purple {width: 100%; padding: 10px; background-color: #9A01A1; color: #fff; border-radius: 14px; border: none;}

  .image-wrapper {
    position: absolute;
    width: 235%;
    height: 0; /* This ensures the div takes up no space by default */
    padding-top: 100%; /* This sets the aspect ratio of the image wrapper (adjust as needed) */
    padding-bottom: 100%;
    overflow: hidden; /* This hides any overflow from the image */
    margin-top: -100%;
    margin-left: -100%;
    z-index: 100;
}

.image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* This makes the image take up the full width of the image wrapper */
    height: auto; /* This ensures the image maintains its aspect ratio */
    z-index: 100;
}

@media only screen and (min-width: 300px) and (max-width: 1000px) {
  .image-wrapper img {display: none;}
  
}