@import url("font.google.css");
body {
  font-family:  sans-serif;
}
.under-line{
    background-color:#dc3545;
    widows: 100%;
    height: 3px;
    margin-top: 20px;
    margin-bottom: 20px;
    
}
/* All link CSS color */
a{
    color: white;
}
a:hover{
    color: #dc3545;
    text-decoration: none;
}
/* Download page link CSS color*/
.form-links  a{
    color: #c1175f;
}
.form-links a:hover{
    color: #dc3545;
    text-decoration: none;
}
.page-contents{
    margin-top: 42px;
    padding-top: 40px;
}
.padding-items{
    padding: 0px 25px;
}
.top-marge{
    padding-top: 10px;
}
.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
/* --------------------------------------------
    NAV BAR CSS
----------------------------------------------
*/

.nav-color{
/*    background-image: linear-gradient(to right,#8888e6,#4747cc,#3737a7,#313188,#2c2c79, #13135a);*/
    background-color: #7a99cb;
    color: white;
}
.nav-title{
/*    background-color: #44c38d;*/
    background-color: #7a99cb;
/*    color: white;*/
    color: #313188;
}
.nav-color nav-link{
    font-family: 'Oswald', sans-serif;
    color: white;
/*    padding-right: 10px;*/
}
.navbar-light .navbar-nav .active>.nav-link{
    color: white;
    padding: 0px 15px;
    border-bottom-style: solid;
    border-bottom-color: white;
}
.navbar-light .navbar-nav .nav-link{
    color: white;
    padding: 0px 15px;
}

.navbar-light .navbar-nav .nav-link:hover{
    background-color: white;
    color: #13135a;
    border-radius: 10px;
}
/* --------------------------------------------
    FOOTER LAYOUT CSS
----------------------------------------------
*/

.footer {
    
    background-color: #969696;
    
  /* Full height */
/*  height: auto; */
  /* The image used */
  /*  background-image: url("../images/conctacts_footer.jpg");*/
  /* Center and scale the image nicely */
    /*
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    */
}

.footer .contents{
    height: auto;
    padding: 15px;
    bottom: 0; /* At the bottom. Use top:0 to append it to the top */
    top: 0;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1; /* Grey text */
    width: 100%; /* Full width */
    
}
.footer-icon{
    font-size: 25px;
    padding: 0px 10px;
}
.footer-icon-call{
    transform: rotate(90deg);
}
.footer-socila-Medila{
    font-size: 35px;
    padding: 0px 10px;
}
.button-new{
    width: 50%;
    height: 40px;
    color: white;
    margin-top: 5px;
    border-style: none;
    background-color:#dc3545; 
}
.button-new:hover{
    width: 50%;
    height: 40px;
    color: white;
    margin-top: 5px;
    border-style: none;
    background-color:#44c38d; 
}
/* --------------------------------------------
    INDEX (HOME)
----------------------------------------------
*/

/* Changes position of caption */
.carousel-caption {
    top: 30%;
    left: 10%;
    right: auto;
    bottom: auto;
}

.carousel-caption h1 {
    font-size: 44px;
}


@media (min-width: 576px) {
    .img-size img{
      height: 400px;
    }
}

@media (min-width: 768px) {
  .img-size img{
      height: 500px;
    }
}

@media (min-width: 992px) {
  .img-size img{
      height: 500px;
    }
}

@media (min-width: 1200px) {
  .img-size img{
      height: 500px;
    }
}


.button-home{
    width: 50%;
    height: 40px;
    color: white;
    margin-top: 5px;
    background-color:  #b14822;
    border-style: none;
}
.button-home:hover{
    width: 50%;
    height: 40px;
    border-style: solid;
    border-color: #b14822;
    color: #b14822;
    margin-top: 5px;
    background:rgba(253, 251, 249, 0);
}

.button-calculater{
    width: 50%;
    height: 40px;
    color: white;
    margin-top: 5px;
    background-color:#b14822 ;
    border-style: solid;
    border-color: #b14822;
    
}

.home-about-div{
    color: white;
    background-image: linear-gradient(to right, #13135a,#4747cc);
    padding: 15px;
}

.home-about-div-button{
    width: 50%;
    height: 40px;
    color: white;
    margin-top: 5px;
    background-image: linear-gradient(to right, #4747cc,#13135a);
    border-radius: 10px;
    border-style: none;
}
.home-about-div-button:hover{
    width: 50%;
    height: 40px;
    border-style: solid;
    border-color: white;
    color: white;
    margin-top: 5px;
    background:rgba(253, 251, 249, 0);
}

/* --------------------------------------------
    ABOUT-US
----------------------------------------------
*/
.about-page{
    padding-bottom: 15px;
}
.team-b{
    display: flex;
}
.team-b-content{
    padding: 0px 15px;
}
/* --------------------------------------------
    SERVICES - CARDS
----------------------------------------------
*/
.containers {
    position: relative; 
    max-width: 800px; /* Maximum width */
    margin: 0 auto; /* Center it */
}

.containers .content {
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 100%; /* Full width */
  padding: 20px; /* Some padding */
}

.services-modal-title{
    color: white;
    background-image: linear-gradient(to right,#8888e6,#4747cc,#3737a7,#313188,#2c2c79, #13135a);
}
.services-modal-details{
    padding: 0px;
}
.services-modal-details h2{
    color: #313188;
}
.services-modal-details h3{
    color:black;
    padding: 0px 15px;
}
.services-color{
    color: #dc3545;
}
/* --------------------------------------------
    CONCACT LAYOUT CSS
----------------------------------------------
*/

.contact-page{
    background:url('../images/conctacts_page.jpg')no-repeat;
}

.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #2d2d6a;
  padding-left: 20px;
  padding-right: 20px;
}

.contact-page .padding{
    padding: 15px 0px;
}
.contact{
    width: 100%;
    
}

.text-contact{
    background-image: linear-gradient(to right, #13135a,#4747cc);
    color: white;
    width: 49.5%;
    height: 40px;
    border-style: hidden;
    display: inline-grid;
    padding: 10px;
    font-family:sans-serif;
    font-style: italic;
    
}

/*
#fist-name{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#last-name{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
*/

.options-calculator{
    background-color: white;
    color: #31317b;
    width: 100%;
    height: 40px;
    border-style: solid;
    display: inline-grid;
    padding: 10px;
    margin-top: 15px;
    font-family:sans-serif;
    font-style: italic;
}

.text-contact2{
    background-color: white;
    color: black;
    width: 100%;
    height: 40px;
    border-style: solid;
    display: inline-grid;
    padding: 10px;
    margin-top: 15px;
    font-family:sans-serif;
    font-style: italic;
    
}

.textarea-contact{
    background-color: #31317b;
    color: white;
    width: 100%;
    height: 250px;
    margin-top: 10px;
    border-style: hidden;
    padding: 10px;
    font-family:sans-serif;
    font-style: italic;
}

.button-contact{
    width: 50%;
    height: 40px;
    color: white;
    margin-top: 5px;
    background-image: linear-gradient(to right, #13135a,#4747cc);
    border-style: none;
}
.button-contact:hover{
    width: 50%;
    height: 40px;
    border-style: solid;
    border-color: #13135a;
    color: #13135a;
    margin-top: 5px;
    background:rgba(253, 251, 249, 0);
}

/* --------------------------------------------
    Services CSS
----------------------------------------------
*/

.service-page1{
    background:url('../images/pension-3.jpg')no-repeat;
}
.service-page2{
    background:url('../images/wiba-2.jpg')no-repeat;
}


/* --------------------------------------------
    DOWNLOAD CSS
----------------------------------------------
*/
.form-Download{
    font-size: 18px;
    list-style-type: square;
}
.form-Download li{
    font-size: 18px;
    padding: 0px 25px;
}

/* --------------------------------------------
    Form Test CSS
----------------------------------------------
*/

* {
  box-sizing: border-box;
}
#FormTest {
  background-color: #f1f1f1;
}
#regForm {
  background-color: #ffffff;
/*  margin: 100px auto;*/
  font-family: Raleway;
  padding: 40px;
  width: 100%;
  min-width: 300px;
}

#regForm h1 {
  text-align: center;  
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}
.select{
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

.button-form {
  background-color: #4040a2;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

.button-form:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

.FormStep{
    width: 50%; 
    border-style: solid; 
    border-radius: 50%; 
    padding: 15px;
    display: inline-block;
    text-align: center;
    
}

.FormStep-active{
    width: 50%;  
    border-style: solid; 
    border-color:blue;
    color:blue; 
    border-radius: 50%; 
    padding: 15px;
    display: inline-block;
    text-align: center;
}
/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}


.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}