:root {
  --grey: #1E2A38;
  --orange: #FF6B2C;
  --lightGrey: #F3F4F6;
  --lightGrey: #F3F4F6;
  --textGrey: #757D88;
}


html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body,
html {
  font-size: 16px;
  padding: 0;
  margin: 0 auto;
  position: relative;
  height: 100%;
  font-family: "Open Sans", sans-serif;
  background-color: #F8F9FF;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#addChosen {
  color: var(--orange);
}

h1{

 font-size: 3rem;
 line-height: 1.3;

}


.h2-main{

 font-size: 2rem;
 line-height: 1.3;

}


h2{

 font-size: 1.1rem;
 color: var(--grey);
 line-height: 1.3;
 margin: 0;
  padding-bottom: 0.5em;

}

h3{

 font-size: 1rem;
 color: var(--grey);
 line-height: 1.3;
 margin: 0;

}

p{

 font-size: 1.1rem;
 color: var(--textGrey);
 margin: 0;
 line-height: 1.5;

}

.p-small{

 font-size: 1rem;

}

.x-small{

  font-size: 13px;
  padding-top: 0.5em;

}


@media (max-width: 500px) {

  h1{

  font-size: 2.3rem;
  line-height: 1.3;

  }


  .h2-main{

 font-size: 1.5rem;


}


h2{

 font-size: 1rem;
 line-height: 1.5;

}


p{

 font-size: 1rem;
 color: var(--textGrey);
 margin: 0;
 line-height: 1.5;

}

}

.bold{

 font-weight: 700;
 color: var(--grey) !important;

}

.white{

  color: white !important;

}


.pb{

  padding-bottom: 1em;

}



.btn{

  background-color: var(--orange);
  color: white;
  padding: 15px 50px;
  border-radius: 2px;
  text-decoration: none;
  display: block;
  width: fit-content;
  margin-top: 2em;
  cursor: pointer;

 transition: background-color 0.2s ease-in-out;

}


.btn:hover{

 background-color: #E65E23;

}


.small{
 
  color: var(--orange);
  font-size: 0.8rem;
  letter-spacing: 4px;

}




#toggle{
	height: 40px;
	width: 40px;
	display: block;
	background-color: #2D3845;
	cursor: pointer;
	padding: 5px 5px 0 5px;
	transition: all 0.2s ease-in-out;
	border-radius: 3px;
  display: none;
}

#toggle span{
	height: 3px;
	width: 20px;
	background: white;
	display: block;
	margin: 5px;
	position: relative;
	transition: all 0.2s ease-in-out;
}

#toggle.animate{
	border-radius: 30px;
}

#toggle.animate .line1{
	transform: rotate(45deg);
	transform-origin: center;
	top: 8px;
}

#toggle.animate .line2{
	opacity: 0;
}

#toggle.animate .line3{
	transform: rotate(-45deg);
	transform-origin: center;
	bottom: 8px;
}



.heroThanks{

position: relative;
  background: var(--grey);
  color: white;

  text-align: center;
  height: 100vh;
  display: flex;
  align-items: center;
    justify-content: center;

}





#pop{

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  
  align-items: center;
  justify-content: center;
  display: none;


}


#pop > .wrap{

  background-color: white;
  max-width: 600px;
  padding: 2em;
  border-radius: 2px;
  width: 90%;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px;
   position: relative;

}


@media (max-width: 450px) {

  #pop > .wrap{


  padding: 2em;
 

}


}


.pop-wrap-title{

 display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--orange);

}



select{

  color: var(--orange);
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  border: none;
  font-weight: 700;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  border:0px;
   outline:0px;
   font-size: 1.1rem;
}

select::-ms-expand {
    display: none;
}


.chosenpackage{

  padding: 0;
  margin: 0;

}

#pop > .wrap .close{

 position: absolute;
 top: 0;
 right: 0;
 cursor: pointer;
 padding: 1em;

}


#pop > .wrap form{

  padding: 0;
  margin: 0;
  padding-top: 2em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;

}

#pop > .wrap form input{

  padding: 1em;
  border-radius: 2px;
  border: solid 1px var(--textGrey);
  background-color: #F8F9FF;
  color: var(--grey);
  font-size: 1rem;
  width: 100%;
  outline: none;

}
#pop > .wrap form input:focus{

  border: solid 1px var(--orange);

}
#pop > .wrap form button{

  background-color: var(--orange);
  color: white;
  padding: 15px 50px;
  border-radius: 2px;
  text-decoration: none;
  display: block;
  width: fit-content;
  margin-top: 0.5em;
  cursor: pointer;
  border: none;
  width: 100%;
  font-size: 1rem;
 

  transition: background-color 0.2s ease-in-out;

}


#pop > .wrap form button:hover{

 background-color: #E65E23;

}



header{

   position: fixed;
   z-index: 999999;
   right: 0;
   left: 0;
   background-color: #1E2A38;
   
}

header .header-wrap{

  max-width: 1128px;
  padding-top: 2em;
  padding-bottom: 2em;
   width: 90%;
   margin: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: all 0.5s;
}


.header-wrap-scroll{

  transition: all 0.5s;
  padding-top: 1em !important;
  padding-bottom: 1em !important;

}

header > .header-wrap .logo{

  width: 180px;
}

.logo-small{

   transition: all 0.5s;
   width: 140px !important;

}

header > .header-wrap .nav{
  
  padding: 0;
  margin: 0;
  

}

.nav-mob{
  
  position: fixed;
  margin: auto;
  z-index: 99999;
  background-color: #2D3845;
  padding: 2em;
  max-width: 90%;
  right: 0;
  left: 0;
  top: 6em;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  display: none;
  
}


.nav-mob li{

  display: block;
  color: white;
  font-size: 20px;
  padding-bottom: 1em;

}

.nav-mob li:last-child{

  padding-bottom: 0em;

}



@media (max-width: 540px) {

  header > .header-wrap .nav{
  
  display: none;
  
}

#toggle{

  display: block;

}

}

header > .header-wrap .nav li{
  
  padding: 0;
  margin: 0;
  color: white;
  display: inline-block;
  padding-right: 3em;
  cursor: pointer;

}

header > .header-wrap .nav li:last-child{
  
  padding-right: 0;

}



.hero{

position: relative;
  background: var(--grey);
  color: white;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
 
  height: 90vh;
  display: flex;
 


}

.hero-content{

  max-width: 1128px;
  padding-top: 0em;
  text-align: center;
  

  width: 90%;
  margin: auto;
  

}




.hero-content h1{

  font-weight: 700;
  margin: 0;
  padding: 0;
  max-width: 700px;
  margin: auto;
  

}

.hero-content h2{


  color: var(--lightGrey);
  margin: 0;
  padding: 0;
  padding-top: 1em;

  font-weight: 400;

}

.hero-content .hero-btn{

  background-color: var(--orange);
  color: white;
  padding: 15px 35px;
  border-radius: 2px;
  text-decoration: none;
  display: block;
  width: fit-content;
margin: auto;

   margin-top: 3em;
   
   cursor: pointer;
   transition: background-color 0.2s ease-in-out;

}


.hero-content .hero-btnThanks{

  background-color: var(--orange);
  color: white;
  padding: 15px 50px;
  border-radius: 2px;
  text-decoration: none;
  display: block;
  width: fit-content;

  margin: auto;
   margin-top: 2em;
   margin-bottom: 0em;
   cursor: pointer;
   transition: background-color 0.2s ease-in-out;

}


.hero-content .hero-btn:hover{

 background-color: #E65E23;

}


.hero-content .hero-btnThanks:hover{

 background-color: #E65E23;

}




























.included .wrap{

 max-width: 1128px;
  margin: 0 auto;
  width: 90%;
  padding-top: 5em;
  padding-bottom: 7em;
  

}




.included-title{


   display: flex;
   gap: 4em;
    align-items: center;  
    justify-content: space-between;
    padding-bottom: 4em;


}



.included-cards-wrap{

  display: flex;
  gap: 2em;

   justify-content: space-between;
   padding-bottom: 2em;
   

}

.included-cards-wrap:last-child{

  padding-bottom: 0em;

}


.included-card{

  background-color: white;
  padding: 2.5em;
  width: 100%;
  height: fit-content;
  border-radius: 2px;
  transition: box-shadow 0.5s;

}


.included-card > img {

 width: 25px;

}


.included-card:hover{

 
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 

}


.included-card > h3{

  padding-top: 1em;
  padding-bottom: 0.5em;

}












.footer-pricing{

  position: relative;
  background: var(--grey);


}


.footer-pricing .wrap{

  max-width: 1128px;
  margin: 0 auto;
  width: 90%;
  padding-top: 7em;
  padding-bottom: 7em;

}


.footer-pricing .title h2{

  text-align: center;


}


.footer-pricing .title p{

  text-align: center;

}


.pricing{

  display: flex;
  justify-content: center;
  gap: 2em;
  padding-top: 5em;

}




.pricing .pricing-card{

  background: white;
  padding: 2em;
  border-radius: 2px;
  width: 100%;
  max-width: 400px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  height: fit-content;
  
}





.pricing .pricing-card .title{

   border-bottom: solid 1px var(--textGrey);
   padding-bottom: 2em;
  
   margin: auto;

}

.pricing .pricing-card .title p{


  max-width: 250px;
  margin: auto;
}

.pricing .pricing-card ul{

  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--textGrey);
  font-size: 1rem;
  line-height: 1.5;
  padding-top: 2em;

}


.pricing .pricing-card ul li{

  padding-bottom: 1em;
  display: flex;
  gap: 0.5em;
  align-items: center;


}

.pricing .pricing-card ul li:last-child{

  padding-bottom: 0em;

}


.price-wrap{

  padding-top: 2em;
  text-align: center;
  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: center;

}


.price-wrap .price{

  font-size: 4rem;
  font-weight: 700;
  color: var(--grey);
  padding-bottom: 0;

}


.price-wrap .price span{

  font-size: 2rem;
  color: var(--grey);
  font-weight: 700;

}

.full{

  width: 100% !important;
  text-align: center;

}




footer .wrap{

  max-width: 1128px;
  margin: 0 auto;
  width: 90%;
  padding-top: 2em !important;
  padding-bottom: 2em !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: solid 1px var(--lightGrey);
}


.socials{

  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: center;

}




.faq-section {
  max-width: 1128px;
  width: 70%;
  margin: auto;
  padding-bottom: 5em;
  padding-top: 1em;
}

.faq-section h2 {
  text-align: center;
  margin-bottom: 2em;

}

.faq-item {
  margin-bottom: 1.5rem;
  border-bottom: solid 1px var(--lightGrey) !important;
  padding-bottom: 1rem;
}

.faq-item:last-child {
  
  border-bottom: none !important;
}

.faq-item h3 {
  
  margin-bottom: 0.5rem;

}








@media (max-width: 900px) {



  .included-title{


    flex-direction: column;



}



.included-cards-wrap{


  flex-direction: column;
   

}


  .faq-section {

  width: 90%;
 
}



  .why-digaTradie-wrap{

  flex-direction: column;

}


.included .wrap{

  flex-direction: column;
  text-align: center;

}

.included-list{

  margin: auto;
}


.included-content{

  position:static;
  position: -webkit-relative;
 top: 60px;
 height: fit-content;
 text-align: center;

}

.btn{

 margin: auto;
 margin-top: 2em;

}


.pricing{

  flex-direction: column;
 align-items: center;

}

}