@import "thankyoupage.css";

/* ----- RESET ----- */

body {
  margin: 0;
  box-sizing: 0;
  scroll-behavior: smooth;
  background-color: #fff;
  padding: 0;
  width: 100%;
  position: relative;
}

html, body {
  overflow-x: hidden;
}

.hide{
	display: none;
}


.prenav{
  padding: 1rem;
  background-color: #002b5c;
  color: #cca400;
}

.prenav span{
  display: block;
  color: #cca400;
  font-weight: 400;
  text-align: center;

  font-size: 1rem;
}



/* ----- NAVBAR ----- */

#navbar {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 1rem;

}

#navbar  img {
  width: 14rem;
}

#navbar p{
  font-size: 1.2rem;
  font-weight: 800;
  font-style: italic;
  color: #002b5c;
  margin: 0;
}





/* ----- MAIN CONTAINER ---- */

.section-1{
  background-image: linear-gradient(#12263ab3, #12263aa3), url(../images/background.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 27rem;
}






/* ---- SECTION 1 ----- */

.section-1{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.s-1-text {
  color: #fafcff;
  text-shadow: #12263a 1px 0 10px;
  padding: 0rem 3rem;
  text-align: center;
}

.s1-h1 {
  font-weight: 800;
  font-size: 8rem;
  line-height: 7rem;
}

.s1-h2 {
  font-size: 2.1rem;
  font-style: italic;
  padding: 0;
}





/* ----- RADIO TO BUTTON -------- */

.answer-holder input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.answer-holder label {
  display: flex;
  justify-content: center;
  cursor: pointer;
  align-items: center;
  color: #fff;
  font-weight: 600;
  margin: 0.5rem;
  background-color: #002b5c;
  padding: 20px;
  font-family: sans-serif, Arial;
  font-size: 18px;
  border-radius: 4px;
  width: 95%;
  transition: 1s;
}

.answer-holder input[type="radio"]:checked + label {
  background-color:#cca400;
}

.answer-holder input[type="radio"]:focus + label {
  border: 2px dashed #444;
}

.answer-holder label:hover {
  background-color: #cca400;
}


/*.answer-holder label:hover, .answer-holder label:focus {
    box-shadow: inset 650px 0 0 0 var(--hover);
  }


.answer-holder {
  --color: #cca400;
  --hover: #cca400;
}


.answer-holder {
  color: var(--color);
  transition: .6s;
}


.answer-holder label:hover, .answer-holder label:focus {
  border-color: var(--hover);
  color: #fff;
}*/







/* ----- FORM ------ */


.form-container {
  background-color: #f5f5f5;
  color: #12263a;
  height: 35rem;
  padding: 1rem 2rem 2rem;
}

.form-h2 {
  font-weight: 800;
  font-size: 2rem;
  text-align: center;
  color: #1e3a8a;
}

.form-h3 {
  font-size: 13px;
  font-style: italic;
  text-align: center;
  margin-bottom: 0;
}

.step-title{
  text-align: center;
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #1e3a8a;
  padding: 0 1rem;
}




#form-text{
  display: block;
}

.form-group {
  margin: 0.4rem 0;
  margin-top: -1px;
}


.form-group input[class="form-control line-box"]{
  margin: 0.2rem;
  padding: .6rem .75rem;
  width: 100%;
}



.form-control::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #232f3f47;
  opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #232f3f47;
}

.form-control::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #232f3f47;
}

.check {
  padding-left: 1rem;
  margin-top: 0.5rem;
}

.btn-form {
  width: 2rem;
  height: 3rem;
  font-size: 20px;
  background-color: #a8dadca7;
  color: #12263a;
  border: 0;
  border-radius: 10px;
  margin-top: 1rem;
  margin-left: -0.7rem;
  transition: 1s all;
}

.btn-form:hover{
    background-color: #12263a;
    color: #a8dadc;
}




.return{
    text-align: right;
    color: #dadada;
    padding-top: 15px;
    text-decoration: underline;
    box-sizing: border-box;
    cursor: pointer;
    width: 100%;
  }


.termstext{
  font-size: 4px;
  text-align: justify;
}

.hold-title{
  margin-top: -0.5rem;
}

.options{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-btn{
  background-color: #002b5c;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 15px;
  cursor: pointer;
  font-size: 1.3rem;
  transition: all 1s;
  width: 100%;

}

.form-btn:hover{
  background-color: #ff7524;
}


.p-txt{
  text-align: center;
  margin: -0.5rem;
}

.p-txt>h3{
font-size: 20px;
font-weight: 800;
}

.progress-text1{
  width: 100%;
  text-align: left;
}

.progress-text2{
  width: 100%;
  text-align: center;
}

.progress-text3{
  width: 100%;
  text-align: right;
}

.errormsg{
  color: rgb(255, 169, 169);
  background-color: rgba(237, 170, 181, 0.325);
  margin: 0.5rem;
  border-radius: 20px;
  width: fit-content;
}

.fieldpp {
  max-width: 600px;
  width: 100%;

  font-size: 0.5em;
  line-height: 1.3rem;
  padding: 10px 1rem 10px 1.8rem;
  color: #c2c2c2;
  text-align: left;
  font-weight: 200;
}


#termstext>label>a{
  color: #12263a;
}





/* -- SECTION 3 -- */

  .section-3 {
    background-color: #fff;
    color: #333333;
    padding: 5% 6%;
    display: flex;
    align-items: center;


  }

  .s-3-tlt h4{
    color: #002b5c;
    font-weight: 800;
    font-size: 2.9rem;
    text-align: center;
  }



  .section-3{
    padding-top: 3rem;
  }


  .s-3-tlt h4{
    font-size: 2.5rem;
  }


  .s-3-tlt p{
    font-size: 2.2rem;
    font-weight: 500;
    margin-bottom: 3px;
    text-align: center;
    color: #4d4d4d;
  }

  .s-3-tlt{
    margin-bottom: 30px;
  }

  .s3-step{
    align-self:  flex-start;
    padding: 0 1.7rem;

  }

  .s3-step div{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #353535;
    margin: 1rem;
    background-color: #fff;
    box-shadow: rgba(88, 47, 13, 0.4) 0px 2px 4px, rgba(88, 47, 13, 0.3) 0px 7px 13px -3px, rgba(88, 47, 13, 0.2) 0px -3px 0px inset;
    padding: 25px 20px;
    font-size: 13pt;
    font-weight: 400;
    line-height: 18pt;
    border-radius: 20px;
    min-height: 280px;
    transition: 1s;
    text-align: center;
  }

  .s3-step h2{
    font-size: 3.2rem;
    font-weight: bold;
    color: #cca400;
  }

  .s3-step h5{
    font-size: 1.5rem;
    font-weight: bold;
  }


  .s3-step p{
    font-size: 1.1rem;
    font-weight: 200;
  }


  .cta-claim{
    margin-top: 3rem;
  }

  .cta-btn{
    margin: auto;
    max-width: 400px;
    width: 100%;
    border: solid 2px #002b5c;
    font-family: inherit;
    font-size: 1.1rem;
    text-align: center;
    transition: all 500ms ease;
    cursor: pointer;
    padding: 25px ;
    color: #002b5c;
    font-weight: 700;
    border-radius: 10px;
    background-color:;
    
  }


  .cta-btn:hover, .cta-btn:focus {
    box-shadow: inset 400px 0 0 0 var(--hover);
  }

  .cta-btn {
    --color: #002b5c;
    --hover: #002b5c;
  }

  .cta-btn {
    color: var(--color);
    transition: .6s;
  }

  .cta-btn:hover, .cta-btn:focus {
    border-color: var(--hover);
    color: #fff;
  }


  /*.cta-btn {
    background: none;
    border: 2px solid;
    font: inherit;
    line-height: 1;
    margin: 0.5em;
    padding: 1em 2em;
  }*/




/* ----- SECTION 4 ------ */


  .section-4 {
    background-color: #f4f4f4;
    padding: 3rem;
    display: flex;
    align-items: center;
  }

  .s4-tlt{
    text-align: center;
  }

  .s4-tlt h2{
    color: #002b5c;
    font-weight: 800;
    font-size: 2.9rem;
    text-align: center;
    padding-bottom: 2rem;
  }

  .s4-intro-tlt {
    font-weight: 600;
    color: #cca400;
  }

  .s4-p {
    font-size: 1.2rem;
    font-weight: 200;
    text-align: justify;
    margin: 0 auto;
    max-width: 60rem;
    padding-bottom: 2rem;
  }

  .s4-txt{
    padding: 2rem;
  }

  .s4-img{
    max-width: 500px;
    margin: 0 auto;
  }



/* ----- SECTION 5 ------ */


  .section-5 {
    background-color: #fff;
    padding: 5rem 3rem;
    display: flex;
    align-items: center;
  }


  .s5-intro-tlt {
    font-weight: 600;
    color: #002b5c;
    font-size: 2.2rem;
  }

  .s5-p {
    font-size: 1.4rem;
    font-weight: 200;
    text-align: justify;
    margin: 0 auto;
    max-width: 60rem;
    padding-bottom: 2rem;
  }

  .s5-txt{
    padding: 2rem;
  }

  .s5-img{
    max-width: 500px;
    margin: 0 auto;
  }

  .cta-claim-s5 div{
    margin: 0;
    max-width: 350px;
  }



/* ----- SECTION 6 ------ */


  .section-6 {
    background-color: #f4f4f4;
    padding: 5rem 4.5rem;
    display: flex;
    align-items: center;
  }



  .s6-intro-tlt {
    font-weight: 800;
    color: #002b5c;
    font-size: 2.8rem;
    margin-bottom: 0;
  }

  .s6-txt h4{
    font-style: italic;
    font-size: 2.1rem;
    color: #002b5c;
  }

  .s6-p {
    font-size: 1.4rem;
    font-weight: 200;
    text-align: justify;
    margin: 0 auto;
    max-width: 60rem;
    padding: 0 3rem 0 0;
  }


  .section-6 div[class="accordion col-sm-12 col-md-12 col-xl-7"]{
    
    --bs-accordion-bg: #f4f4f4;
  }

  .accordion-collapse{
    background-color: #fff;

  }






/*  ----- THANK YOU PAGE ------ */

#thankyou{
font-weight: 800;
font-size: 40px;
text-align: center;
}

#thankyou > span {
  font-size: 30px;
  font-style: italic;
  font-weight: 500;
}

.thank-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}



/* ----- FOOTER ------ */

.footer {
  color: #fff;
  background-color: #002b5c;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.footer>p>a{
  color: #f1faee;
}

/* Realised by */

.really{

  border: 2px solid #ccc;
  border-radius: 10px;
  background-color: #f7f7f7;
  padding: 1.5em;
  color: #999;
  width: 50%;
  /*max-width: 800px;*/
  min-height: 500px;
  position: fixed;
  top: 10%;
  left: 50%;
  margin-left: -25%;
  transform: scale(0, 0);
  transition: all 0.5s ease;
  z-index: 9;
  overflow:hidden;
  /*margin: auto;*/
}

.reallyactive{
  transform: scale(1, 1);
  /*position: fixed;*/
}

#realisedbybox{
  margin-top: 20px;
  overflow-y: scroll;
  max-height: 400px;
}

#realisedby img {
  max-width: 200px;
}

#realisedbyclose {
  float: right;
  margin-right: 15px;
}

.fa-window-close{
  border: 0;
  border-radius: 5px;
  color: #f1faee;
  background-color: #ff97a7;
  font-weight: 800;
}

/* ----- MEDIA QUERYS ------ */


/* mid-screen */

@media (max-width: 991px) {
  .form-container{
    display: flex;
    justify-content: center;
  }


  #mainform{
    width: 90%;
  }
}



@media (max-width: 767px) {

  .prenav{
    display: none;
  }

#navbar{
  height: 4rem;
}

  .nav{
    height: 5rem;
  }


  .section-1{
    min-height: 20rem;
  }

  .s-1-text{
    padding: 1rem 0;
  }


  .s1-h1 {
    font-weight: 800;
    font-size: 4rem;
    line-height: 4rem;
  }

  .s1-h2 {
    font-size: 1.2rem;
    font-style: italic;
    padding: 0;
  }





  .form-container{
    height: fit-content;
  }

  .really{
    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #f7f7f7;
    padding: 1.5em;
    color: #999;
    width: 80%;
    /*max-width: 800px;*/
    min-height: 500px;
    position: fixed;
    top: 10%;
    left: 30%;
    margin-left: -20%;
    transform: scale(0, 0);
    transition: all 0.5s ease;
    z-index: 9;
    overflow:hidden;
    /*margin: auto;*/
  }

  .reallyactive{
    transform: scale(1, 1);
    /*position: fixed;*/
  }

}

/* mobile */

@media (max-width: 575px) {

  #navbar{
    justify-content: center;
  }

  #navbar p{
    display: none;
  }

  .section-1{
    min-height: 15rem;
  }


  .form-container {
    margin: 0;
    padding: 1rem;
    height: fit-content;
  }

  .answer-holder{
    padding-left: 0;
  }





  .s-3-tlt p{
    font-size: 1.5rem;
  }



  .s4-tlt h2{
    font-size: 2.1rem;
  }

  .s4-txt{
    padding: 1.5rem 0;
  }



  .s5-txt{
    padding: 0 0 2rem;
  }



  .section-6{
    padding: 2rem 2.2rem ;
  }

  .s6-p{
    padding: 0;
    padding-bottom: 1.5rem;
  }










  .really{
    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #f7f7f7;
    padding: 1.5em;
    color: #999;
    width: 100%;
    /*max-width: 800px;*/
    min-height: 500px;
    position: fixed;
    top: 10%;
    left: 0;
    margin-left: 0;
    transform: scale(0, 0);
    transition: all 0.5s ease;
    z-index: 9;
    overflow:hidden;
    /*margin: auto;*/
  }

  .reallyactive{
    transform: scale(1, 1);
    /*position: fixed;*/
  }
}





/* Contact Form */


.contactform {
  border: 2px solid #ccc;
  border-radius: 10px;
  background-color: #f7f7f7;
  padding: 20px 40px;
  color: #999;
  position: fixed;
  top: 10%;
  margin-left: 35%;
  margin-right: 35%;
  margin-top: 0px;
  z-index: 10;
  height: auto;
  
  transform: scale(0, 0);
  transition: all 0.5s ease;
}


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

  .contactform {
    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #f7f7f7;
    padding: 20px 40px;
    color: #999;
    position: fixed;
    top: 10%;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 0px;
    padding: 10px;
    z-index: 10;
    height: auto;
    
    transform: scale(0, 0);
    transition: all 0.5s ease;
  }

} 

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

  .contactform {
    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #f7f7f7;
    padding: 20px 40px;
    color: #999;
    position: fixed;
    top: 10%;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 0px;
    padding: 10px;
    z-index: 10;
    height: auto;
    
    transform: scale(0, 0);
    transition: all 0.5s ease;
  }

} 

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

  .contactform {
    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #f7f7f7;
    padding: 20px 40px;
    color: #999;
    position: fixed;
    top: 10%;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 0px;
    padding: 10px;
    z-index: 10;
    height: auto;
    
    transform: scale(0, 0);
    transition: all 0.5s ease;
  }

} 


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

  .contactform {
    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #f7f7f7;
    padding: 20px 40px;
    color: #999;
    position: fixed;
    top: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding: 10px;
    z-index: 10;
    height: auto;
    
    transform: scale(0, 0);
    transition: all 0.5s ease;
  }


} 

.contactactive{
  transform: scale(1, 1);
  position: fixed;
}


#xclose {
  /*position: fixed;*/
  padding: 5px;
  margin: 0 5px 10px 0;
  background-color: #ececec;
  border: 1px solid #c5c5c5;
  width: 26px;
}

#contacterr {
  margin-top: 10px;
  margin-bottom: 10px;
  color: red;
}

#bclose {
  line-height: 1em;
  border-radius: 0;
  padding: 4px 0;
  font-size: 18pt;
}

/* ------- LOADING ANIMATION ---------- */

.loader-container{
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}

.spinner{
  border: 6px solid #99acae47;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-left-color: #b5dfe1;
  margin-bottom: 1rem;
  
  animation: spin 1s ease infinite;
}

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

.loading-text1{
  display: block;
  text-align: center;
}

.loading-text2{
  opacity: 0;
  margin-top: -5rem;
  text-align: center;
}

#loading-city{
  font-weight: 800;
}

.butn{
  margin-top: 1.5rem;
  width: 10rem;
  border-radius: 10px;
  background-color: #a8dadca7;
  color:#12263a;
  text-align: center;
  padding: 0.5rem;
  cursor:pointer;
  transition: 1s all;
}

.butn:hover{
  background-color: #7aacae;
}

.butn-next{
  display: none;
  background-color: #a8dadca7;
  color:#12263a;
  width: 8rem;
  padding: 0.5rem;
  border-radius: 10px;
  cursor:pointer;
  transition: 1s all;
  text-align: center;
  margin-top: 1rem;
}

.butn-next:hover{
  background-color: #7aacae;
}