/* ========================= Reset ======================== */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote{
    padding:0px;
    margin:0px;
    font-size:100%;
    font-weight:normal;
}

ol {
    margin-left:1.4em;
    list-style:decimal;
}

ul{
    margin-left:1.4em;
    list-style:decimal;
}

img{
    border:0;
}
/* ========================= Reset ======================== */
    
body{
    
    font-family: 'Montserrat', sans-serif;
     background-image: url(../../src/assets/bg_1.svg);
     background-repeat: no-repeat;
     background-size: 120%;
}
#hero{
    width: 100%;
   
    height: 100%;
     padding: 20px;
     box-sizing: border-box;
     padding-top: 80px;
    

}

#hero .container{
    display: flex;
    
    gap: 20px;
    background-color: #F3F2F7;
    border-radius: 10px;
    width: 100%;
     max-width: 1150px;

    padding: 40px;
    box-sizing: border-box;
    margin: 0 auto;
    /* box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07); */
}

.copyright{
     display: flex;
    
    gap: 20px;

    width: 100%;
     max-width: 1150px;
     font-size: 10px;
     padding-top: 20px;
     padding-bottom: 20px;

   
    box-sizing: border-box;
    margin: 0 auto;
}

.shadow_box{
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.07);
}

#hero .container > div{
    width: 100%;
}

#hero .intro_header{
    font-size: 16px;
    color: #EF510F;
    font-weight: 400;
    margin-bottom: 0px;


}

#hero h1{
    font-size: 35px;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
}

#hero .copy{
    font-size: 16px;
    color: #000;

    margin-bottom: 20px

}

.logo{
    margin-bottom: 40px;
}

.feature{
    width: 100%;
}


.main_step_1,
.main_step_2,
.main_step_3 {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease; /* fade effect */
}

.main_step_1.active,
.main_step_2.active,
.main_step_3.active {
  display: block;
  opacity: 1;
}

label.error{
    color: #EF510F;
    font-size: 10px;
    position: absolute;
    top: 8px;
    right: 10px;
}

.spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #333;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

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




.steps{
    width: 100%;
    display: flex;
     gap: 10px;
     margin-bottom: 40px;
}

.steps > div{
    width: 100%;
    border-radius: 25px;
    background-color: #CFCFCF;
    height: 8px;
   
}

.steps > div.active{
    background-color: #47BF68;
}

.step_heading{
     font-size: 18px;
    color: #000;
    font-weight: 600;
     margin-bottom: 20px
}

.select_box_single_alert{
    border-radius: 5px;
   
    padding: 15px;
    margin-bottom: 10px;
    padding-left: 40px;
    cursor: pointer;
    background-color: #CA0000;
    color: #FFF;
     position: relative; /* needed for the pseudo-element */
     transition: all .35s  ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -webkit-transition: all .35s ease-in-out;

}

.select_box_single{
    border-radius: 5px;
    border: 1px solid #CCC;
    padding: 15px;
    margin-bottom: 10px;
    padding-left: 40px;
    cursor: pointer;
    background-color: #FFF;
     position: relative; /* needed for the pseudo-element */
     transition: all .35s  ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -webkit-transition: all .35s ease-in-out;

}

.select_box_single::after {
    content: "";
    width: 15px;
    height: 15px;
    background-color: #888; /* grey dot */
    border-radius: 50%; /* makes it circular */
    position: absolute;
    top: 23px;
    left: 13px; /* distance from left edge */
    transform: translateY(-50%); /* vertically centre */
}

/* when the box is selected */
.select_box_single.selected::after {
    content: "";
    width: 15px;
    height: 15px;
    background-color: #EF510F; /* grey dot */
    border-radius: 50%; /* makes it circular */
    position: absolute;
    top: 23px;
    left: 13px; /* distance from left edge */
    transform: translateY(-50%); /* vertically centre */
}

.select_box_single:hover{
    
     border: #EF510F 1px solid;
}

.select_box_single:hover::after{
      content: "";
    width: 15px;
    height: 15px;
    background-color: #EF510F; /* grey dot */
    border-radius: 50%; /* makes it circular */
    position: absolute;
    top: 23px;
    left: 13px; /* distance from left edge */
    transform: translateY(-50%); /* vertically centre */
}

.select_box_single.selected{
    border: #EF510F 1px solid;
    background-color: #f6e9e3;
}

.select_box_single .title{
    font-size: 14px;
    color: #000;
    font-weight: bold;
    margin-bottom: 10px;
}

.select_box_single .desc{
    font-size: 14px;
    color: #000;

}

.select_box_single_alert .title{
    font-size: 14px;
    color: #FFF;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 5px;
}
.select_box_single_alert .desc{
    font-size: 14px;
    color: #FFF;

}
.select_box_single_alert .desc a{
    color: #FFF;
    text-decoration: underline;
}

.sub{
    margin-bottom: 20px;
    font-size: 14px;
}

.btn_1{
    background-color: #EF510F;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    border: none !important;

         transition: all .35s  ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -webkit-transition: all .35s ease-in-out;
}

.btn_1:hover{
    background-color: #47BF68;
}


.contactform_landing{
 /* border-radius: 5px;
    border: 1px solid #CCC;
    padding: 40px;
    margin-bottom: 10px;
    cursor: pointer;
    background-color: #FFF;
     position: relative; 
     transition: all .35s  ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -webkit-transition: all .35s ease-in-out; */

}

.contactform_landing input{
    border-radius: 5px;
    border: 1px solid #CCC;
    height: 50px;
    padding-left: 40px;
    padding-right: 20px;
 
    width: 100%;
    box-sizing: border-box;
    display: block;
     font-family: 'Montserrat', sans-serif;
     margin-bottom: 10px;
}

.contactform_landing > div{
    position: relative;
}

.icon_1{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-round-icon lucide-user-round"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/></svg>') !important;
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.icon_2{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-icon lucide-mail"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>') !important;

     background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.icon_3{

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone-icon lucide-phone"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>') !important;
     background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.icon_4{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>') !important;
    background-position: calc(100% - 10px) center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.icon_5{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-siren-icon lucide-siren"><path d="M7 18v-6a5 5 0 1 1 10 0v6"/><path d="M5 21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2z"/><path d="M21 12h1"/><path d="M18.5 4.5 18 5"/><path d="M2 12h1"/><path d="M12 2v1"/><path d="m4.929 4.929.707.707"/><path d="M12 12v6"/></svg>') !important;

       background-position: 10px 15px;
    background-repeat: no-repeat;
    background-size: 20px;
}


/* MEDIA */

@media only screen and (max-width:1400px) {

}

@media only screen and (max-width:1200px) {

}

@media only screen and (max-width:1024px) {

}

@media only screen and (max-width:768px) {

  #hero .container{
    display: flex;
    flex-direction: column;
    
    gap: 20px;
    background-color: #F3F2F7;
    border-radius: 10px;
    width: 100%;
     max-width: 1150px;

    padding: 40px;
    box-sizing: border-box;
    margin: 0 auto;
 
}



#hero .container > div{
    width: 100%;
}
}