/*IMPORT GLOBAL CSS*/

@import url('global.css');



body{font-family:var(--font-family); font-size:var(--body-font-size); color:hsl(var(--black));}

.container{width:100%; max-width:calc(var(--container-width) + (var(--container-padding) *2)); margin:0 auto; padding:0 var(--container-padding);}



.section{padding:var(--lg) 0;}

.section-header:not(:last-child), .section-content:not(:last-child){margin-bottom:var(--md);}

.section-header h2{font-weight:var(--fw-black);}

.section-footer h4{font-weight:var(--fw-bold);}

.section-footer h4:not(:last-child){margin-bottom:var(--sm);}

.desktop-border{
  margin-top: 32px;
  margin-left: 57px;
  border: 1px solid rgb(6, 101, 84);
  padding: 30px;
  border-radius: 20px;
}

.hero-section{background-color:hsl(var(--light-orange));}

.logo img{max-width:19.2rem;}

.logo:not(:last-child){margin-bottom:var(--sm);}

.hero{display:grid; grid-template-columns:1fr 50rem; gap:4rem; align-items:start;}

.hero h1{font-weight:var(--fw-black);}

.hero h5{display:flex; align-items:center; gap:1.5rem;}

.hero h5 span{border-bottom:.2rem solid hsl(var(--black)); line-height:1;}

.hero-content .btn:not(:first-child){margin-top:var(--sm);}

.hero-content ul:not(:first-child){margin-top:var(--md);}

.hero-content ul li{padding-left:5rem; background:url(../images/check.svg) left .6rem no-repeat; background-size:2.9rem auto;}

.hero-content ul li:not(:last-child){margin-bottom:1rem;}

.hero-article{border-radius:var(--radius-30); overflow:hidden; border:.1rem solid hsl(var(--black)); background-color:hsla(0, 0%, 81%, 22%); padding:3rem 0 0 2.5rem; display:grid; grid-template-columns:1fr 21rem;}

.hero-article h6{font-weight:var(--fw-black);}

.hero-article-content{margin-bottom:5rem;}

.hero-article h6:not(:last-child){margin-bottom:.5rem;}

.hero-article-content p:not(:last-child){margin-bottom:1rem;}

.hero-article-image{align-self:end; position:relative}

.hero-article-image img{margin:0 auto;}

.hero-article-box{background:hsla(0, 0%, 85%, 67%); position:absolute; left:0; bottom:1rem; width:100%; min-height:7rem; padding:1rem; display:fex; align-items:center; font-weight:var(--fw-semiBold);}

.hero-article-box p{line-height:1.2;}



.hero-strip{padding:var(--sm) var(--container-padding);}

.hero-strip article{width:100%; max-width:58rem; margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; line-height:1.2;}

.hero-strip article h6 i{display:inline; line-height:1; border-bottom:.2rem solid hsl(var(--black)); font-style:normal;}



.features-section{background-color:hsl(var(--light-gray));}



.features-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--md);}

.feature{display:flex; gap:1rem;}

.feature span{width:8rem; flex-shrink:0;}

.feature h6{font-weight:var(--fw-bold);}

.feature h6:not(:last-child){margin-bottom:.5rem;}



.price-section{background-color:hsl(var(--light-orange));}

.price-grid{max-width:89rem; margin:0 auto; display:grid; grid-template-columns:repeat(2, 1fr); gap:3rem var(--xl);}

.price-grid > *{text-align:center;}

.price-grid h3{font-weight:var(--fw-extraBold);}

.price-box{border-radius:var(--radius-20); border:.1rem solid hsl(var(--black)); padding:3rem; box-shadow:0 .4rem .4rem hsla(var(--black), 25%);}

.price-box:not(:first-child){margin-top:var(--sm);}

.price-box h6{line-height:1.2;}

.price-box > :not(:last-child){margin-bottom:var(--sm);}

.price-box + h6{font-style:italic; margin-top:2rem;}



.article-section article{text-align:center; margin:0 auto;}

.article-section article h2{font-weight:var(--fw-black);}

.article-section article > :not(:last-child){margin-bottom:2rem;}

.article-section article h6 span{font-weight:var(--fw-bold);}



.contact-section{background-color:hsl(var(--light-orange));}

.contact-form-block{max-width:51rem; margin:0 auto;}

.contact-form-block h6{font-weight:var(--fw-bold); text-align:center;}

.contact-form-block > *:not(:last-child){margin-bottom:2rem;}

.contact-form-block p span{font-weight:var(--fw-bold);}

.contact-form-block p{line-height:1.3;}

.contact-form > :not(:last-child){margin-bottom:var(--sm);}

.contact-form p{font-weight:var(--fw-bold); line-height:1;}

.contact-form p:not(:last-child){margin-bottom:1.2rem;}

.contact-form input{height:5rem; background-color:hsl(var(--white)); border:.1rem solid hsl(var(--black)); padding:0 1.5rem; font-size:var(--body-font-size); color:hsl(var(--black)); width:100%;}

.contact-form .btn{min-width:auto;}

.checkbox input[type="checkbox"]{display:none;}

.checkbox label{padding-left:4rem; display:block; font-size:var(--fs-lg); position:relative;}

.checkbox label a{display:inline; color:hsl(var(--black)); text-decoration:underline;}

.checkbox label a:hover{text-decoration:none; color:hsl(var(--green));}

.checkbox label::before{width:2.5rem; height:2.5rem; border:.1rem solid hsl(var(--black)); background-color:hsl(var(--white)); content:""; position:absolute; left:0; top:0;}

.checkbox input[type="checkbox"]:checked ~ label::before{background:url(../images/check.png) center center no-repeat hsl(var(--white)); background-size:80% auto;}



footer{padding:var(--lg) 0;}

.footer-logo{display:flex; justify-content:center;}

.footer-logo:not(:last-child){margin-bottom:var(--md);}

.footer-content{display:grid; grid-template-columns:22rem 28rem 28rem; justify-content:space-between; gap:var(--md) var(--sm);}

.footer-content div > :not(:last-child){margin-bottom:1.5rem;}

.footer-content p{font-weight:var(--fw-light);}



@media(min-width:1200px){

	.hero-article-image{order:2;}	

}

@media(max-width:1199px){

	.hero-article{grid-template-columns:1fr; padding:3rem; text-align:center;}

	.hero-article-box{text-align:center; min-height:auto;}

	.hero-article-content{margin-bottom:0;}

	.hero-article-box{width:calc(100% + 6rem); left:-3rem;}

	.hero{grid-template-columns:1fr 35rem; gap:3rem;}

	.hero-article-image img{max-width:12rem;}

}

@media(max-width:991px){

	.hero-section{text-align:center;}

	.hero{grid-template-columns:1fr;}

	.hero-article{max-width:50rem; margin:0 auto;}

	.hero-content ul{display:flex; flex-direction:column; align-items:center;}

	.hero-content ul li{background-size:1.9rem; padding-left:3rem; text-align:left;}

	.hero h5{justify-content:center;}

	.hero-strip article{max-width:52rem;}

	.feature span{width:6rem;}

	.feature span img{max-width:5rem;}

	.checkbox label{padding-left:4rem;}

	.checkbox label::before{width:2.5rem; height:2.5rem;}

	.contact-form input{height:6rem;}

	.footer-content{grid-template-columns:repeat(3, 1fr);}
.desktop-border{
    margin-top: 0px;
    margin-left: 0px;
    border: 0;
    padding: 0px;
    border-radius: 0px;
  }
}

@media(max-width:767px){

	.hero-strip article{grid-template-columns:1fr; text-align:center;}

	.hero-strip article img{margin:0 auto;}

	.features-grid{grid-template-columns:1fr;}

	.price-grid{max-width:50rem; grid-template-columns:1fr;}

	.price-box h6 br{display:none;}

	.price-box + h6 br{display:none;}

	.article-section article h6 br{display:none;}

	.checkbox label{padding-left:3rem;}

	.checkbox label::before{width:2rem; height:2rem;}

	.contact-form input{height:5.5rem;}

	.footer-content{grid-template-columns:1fr;}

	.footer-content{text-align:center;}

	.footer-content div > :not(:last-child){margin-bottom:1rem;}
}

@media(max-width:575px){

	.hero-article{max-width:100%;}

	.hero h1{font-size:var(--h2);}

	.feature span{width:100%;}

	.feature span img{max-width:4rem; margin:0 auto;}

	.feature{flex-direction:column; text-align:center;}

	.contact-form input{height:5rem;}

}



/** modal **/
/* Hide the modal by default */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

.modal-header {
	padding: 5px 16px;
	color: white;
}


/* Add Animation */
@keyframes animatetop {
	from {top: -300px; opacity: 0}
	to {top: 0; opacity: 1}
}

/* Style the modal content */
.modal-content {
    background-color: white;
    margin: 10px auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    position: relative;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	animation-name: animatetop;
	animation-duration: 0.4s
}

/* Style the close button */
.close {
	position: absolute;
    top: -20px;
    right: -20px;
    font-size: 24px;
    cursor: pointer;
    background: #999;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    padding: 6px 18px;
}

/* Style the open modal button (optional) */
#openModal {
    background-color: #008CBA;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 20px;
    cursor: pointer;
}


.radio-label {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  /* Hide the browser's default radio button */
  .radio-label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .radio-label:hover input ~ .checkmark {
	background-color: #ccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .radio-label input:checked ~ .checkmark {
	background-color: #000;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .radio-label input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .radio-label .checkmark:after {
	   top: 9px;
	  left: 9px;
	  width: 8px;
	  height: 8px;
	  border-radius: 50%;
	  background: white;
  }


  input.error {
    border: 2px solid red; /* Apply a red border */
}

label.error, div.error {
    color: red; /* Change the text color to red */
    font-size: 14px; /* Adjust the font size */
    /* Add more CSS styles as needed */
}

.btn {
	cursor: pointer;
}


.loadingIndicator {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    text-align: center;
    z-index: 9999; /* Ensure it's above other elements */
}

.spinner {
    /* Style your loading spinner here (e.g., CSS animation, font awesome) */
    /* Example: */
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20% auto;
}

.text-error{
  color: red;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.price--package input[type="radio"]{
  display: none;
}

.price--package label input:checked ~ div .price-box{
  
}

#modal-term {
  z-index: 99999;
}

.simplebar-content {
  margin-right: 10px;
}

.simplebar-scrollbar:before {
  background-color: rgb(2, 115, 2)
}

.price--package [openSubscribeModal]{
  display: none;
}

.primary--subscriber-btn {
  display: inline-flex;
}

@media(max-width:767px){
  .price--package [openSubscribeModal]{
    display: inline-flex;
    margin-top: 15px;
  }

  .primary--subscriber-btn {
    display: none;
  }
}