/**

 * /*----------------------------------------------------

 * 

 * This file contains the styling for the actual template, this

 * is the file you need to edit to change the look of the

 * template.

 * 

 * 

 * 

 * Table of Content:

 * 01/ Variables

 * 02/ predefine

 * 03/ header

 * 04/ banner

 * 05/ documentation

 * 06/ testimonial

 * 07/ blog

 * 12/ footer 

 * 

 * 

 * =====================================================================

 *

 * @format

 * @File: Default Styles

 * @Author: Droitthemes

 * @URL: Author E-mail:

 * @Default Styles

 */

/*----------------------------------------------------*/

/**

 * /*font Variables

 *

 * @format

 */

/*Color Variables*/

/*=================== fonts ====================*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600&family=Arimo&family=DM+Sans:wght@400;500&family=Fraunces:opsz@9..144&family=Manrope:wght@400;500;600;700;800&family=Roboto:wght@400;500&family=Sora:wght@600;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600;7..72,700;7..72,800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600;700;800&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");

@font-face {

  font-family: FrauncesP;

  font-weight: 400;

  src: url("../fonts/Fraunces-Regular.woff") format("woff");

}

@font-face {

  font-family: FrauncesM;

  font-weight: 500;

  src: url("../fonts/Fraunces-Medium.woff") format("woff");

}

.col-md-offset-right-1,

.col-lg-offset-right-1 {

  margin-right: 8.33333333%;

}



/*---------------------------------------------------- */

/*----------------------------------------------------*/

/** @format */

body {

  height: 100%;

  margin: 0px;

  font-family: "Manrope", sans-serif;
  
  
  
    background: url(../img/bg.jpg) no-repeat 0 0 transparent;

    background-position: center;

    background-size: cover;

    width: 100%;

    overflow: hidden;

    height: 100vh;


}







body.loader{

    background: url('../img/loader1.gif') no-repeat center center transparent;

    

}





body.loader1{

    background: url('../img/loader1.gif') no-repeat center center #f4f9ff;

    

}



:focus {

  outline: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-family: "Manrope", sans-serif;

  color: #2c264a;

}



a {

  text-decoration: none;

}



p {

  font-size: 16px;

  line-height: 28px;

  font-family: "Manrope", sans-serif;

  font-weight: 400;

  color: #4c4c63;

}



.sec_pad {

  padding: 120px 0px;

}







::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */

  color: #ff8f3d;

  opacity: 1; /* Firefox */

}



:-ms-input-placeholder { /* Internet Explorer 10-11 */

  color: #ff8f3d;

}



::-ms-input-placeholder { /* Microsoft Edge */

  color: #ff8f3d;

}







.mainsection {

    background: url(../img/bg.jpg) no-repeat 0 0 transparent;

    background-position: center;

    background-size: cover;

    width: 100%;

    overflow: hidden;

    height: 100vh;

}





section.white-section {

    width: 47%;

    height: 96%;

    position:absolute;

    top:2%;

    background: #fcf6f4;

    border-radius:15px;

}



.right-section{
z-index:40;
  right:1%;

  

    

}

.InfoBanner-4.info-banner,
.InfoBanner-3.info-banner,
.InfoBanner-2.info-banner,
.InfoBanner-1.info-banner {
        position: absolute;
    bottom: 10px;
    right: 2%;
}




h1{

    font-weight:600;

    color:#0c1153;

    font-size:36px;

    font-family: "Poppins", Manrope, Arial;

}







.single-form-row {

    padding: 10px 0;

}





.single-form-row label{

    text-align: left;

    position: relative;

    top: 12px;

    background: #fcf6f4;

    color:#0c1153;

    padding: 0 10px;

    font-weight:600;

    display: inline-block;

    float: left;

    margin: 0 0 0 30px;

    

}





.single-form-row label em{

    font-style:normal;

    font-size:12px;

}



.single-form-row input,.single-form-row select{

display:block;

    width:100%;

    padding:20px 10px;

    margin:5px 0 0px 0;

    font-size:20px;

    border-radius:6px;

    background: #fcf6f4;

    border:1px solid #cdcad5;

}





.step-container.step1-container, .step-container {

    display: flex;

    height: 100%;

    width: 100%;

    text-align: center;

    align-items: center;

    flex-wrap: wrap;

    align-content: center;

}



.stepone-header{

    text-align:center;

    display:block;

    width:100%;

}





.stepone-form {

    text-align: center;

    width: 55%;

    padding: 10px 0;

    margin: 0 auto;

}







.section-indicator div span {

    display: inline-block;

    background: #aaa;

    width: 50px;

    height: 8px;

    margin: 0 2px;

border-radius:10px;

}



.section-indicator div span.on {

    background: #ff8f3d;

}





.section-indicator div span.done {

    background: #0c1153;

}





    



.section-indicator {

    position:absolute;    

    margin:20px 0 0 20px;

    

}


a.gotoback {

    position: absolute;

    bottom: 40px;

    left: 5%;

    background: #ff8f3d;

    width: 60px;

    height: 60px;

    border-radius: 100%;

    display: flex;

    align-items: center;

    flex-wrap: nowrap;

    justify-content: center;

}


a.gotonext {

    position: absolute;

    bottom: 40px;

    right: 5%;

    background: #ff8f3d;

    width: 60px;

    height: 60px;

    border-radius: 100%;

    display: flex;

    align-items: center;

    flex-wrap: nowrap;

    justify-content: center;

}









.col-md-6.single-option a {

    background: #fff;

    display: block;

    margin-bottom:20px;

    border-radius:10px;

    padding: 20px 0;

}





.col-md-6.single-option a img{

width:auto;

height:auto;



}



.col-md-6.single-option a h4{

font-weight:600;

min-height:30px;

font-size:16px; }



.secondsection {
/*
    background: url(../img/bg2.jpg) no-repeat 0 0 transparent;
*/
    background-position: center;

    background-size: cover;

    width: 100%;

    overflow: hidden;

    height: 100vh;

    display:none;

}





.steptwo-options {

    max-width: 450px;

    margin: 30px auto 0px;

    width:50%;

}











.thirdsection {
    background: url(../img/bg3.jpg) no-repeat 0 0 transparent;
    background-position: center;
    background-size: cover;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    display:none;
}





.stepthree-options {
    max-width: 450px;
    margin: 30px auto 0px;
    width:50%;
}









.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

a.b-type.active, a.b-services.active{
    background:#0385b7;
}
a.b-type.active h4, a.b-services.active h4{
    color:#fff;
}



em.note {
    color: red;
    font-size: 12px;
    text-align: right;
    display: block;
    font-style: normal;
    font-weight: 600;
}



.submit-form {
    border: 0;
    background: #ff8f3d;
    padding: 10px 20px;
    float: right;
    margin: 20px 0 0 0;
    font-weight: 600;
}





.fourthsection {
    background: url(../img/bg4.jpg) no-repeat 0 0 transparent;
    background-position: center;
    background-size: cover;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    display:none;

}





.content-section h1 {
    font-family: 'Poppins', serif;
    font-weight: 600;
    font-size: 40px;
    margin:0 0 30px 0;
    line-height: 50px;
}

.content-section {
    width: 35%;
    height: 100vh;
z-index:10;
padding-top:40px;
    display: flex;
    align-content: flex-start;
    left: 7%;
    position:fixed;
    flex-wrap: wrap;
}




.mainsection:after {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 999;
    content: " ";
    opacity: 0.5;
    z-index: 9;
}


ul.social-icon li {
display:inline-block;
list-style: none;
}


ul.social-icon li a{
    font-size:30px;
    margin:0 10px;
    color:#fff;
    text-shadow:0 2px 0px #b89894;
    list-style: none;
}


.b-services i {
    position: absolute;
    top: 5px;
    opacity:0.5;
filter:grayscale(1);
    right: 5px;
}


.b-services  {
    position: relative;
    top: 0;
    right: 0;
}

a.b-services.active i{

    color:#fff;
    opacity:1;
filter:grayscale(0);
}

ul.social-icon {
    padding-left:0;
    margin-top:20px;
}


.review i {
    color: orange;
    font-size: 19px;
    margin: 0 6px 0 0;
}

.review {
    font-weight:600;
}


.thelogo {
    position: relative;
}

.thelogo img{width: 240px;margin: 0 0 50px 0;}


.mainsection .vector {
    background: url(https://arraydigitals.com/logomaker/assets/images/vector.png) no-repeat 0 bottom transparent;
    position: absolute;
    width: 35%;
    height: 100vh;
    background-size: 100% auto;
    content: " ";
    z-index: 10;
      opacity: 1;
    float: left;
    position: relative;
    top: 10px;

    
}


.mainsection .vector.animated{
    animation: fadeinphoto 1s 3s 1;
    -moz-animation: fadeinphoto 0.5s 1s 1;
    -webkit-animation: fadeinphoto 0.5s 1s 1;
    -o-animation: fadeinphoto 0.5s 1s 1;
    animation-iteration-count: infinite;
}



.mainsection .vector.vanish{
    animation: vanishphoto 1s 3s 1;
    -moz-animation: vanishphoto 0.5s 1s 1;
    -webkit-animation: vanishphoto 0.5s 1s 1;
    -o-animation: vanishphoto 0.5s 1s 1;
}


/* Animation Keyframes*/
@keyframes fadeinphoto {
    0% { top: 0px; left:0px; }
    15% { top: 2px; left:2px; }
    25% { top: 4px; left:4px; }
    45% { top: 0px; left:0px; }
    60% { top: 2px; left:5px; }
    79% { top: 4px; left:6px; }
    87% { top: 0px; left:3px; }
    95% { top: 2px; left:2px; }
    100% { top: 4px; left:1px; }
}



@keyframes vanishphoto {
    0% { top: 0px; left:0px; }
    50% { top: -50%; left:50%; }
    99% { top: -100%; left:100%; }
    100% { display:none; }
}

@-moz-keyframes fadeinphoto {
  
    0% { top: 0px; left:0px; }
    50% { top: -50%; left:50%; }
    99% { top: -100%; left:100%; }
    100% { display:none; }
}

@-webkit-keyframes fadeinphoto {

    0% { top: 0px; left:0px; }
    50% { top: -50%; left:50%; }
    99% { top: -100%; left:100%; }
    100% { display:none; }
}

@-o-keyframes fadeinphoto {

    0% { top: 0px; left:0px; }
    50% { top: -50%; left:50%; }
    99% { top: -100%; left:100%; }
    100% { display:none; }
}

.content-section {}