/* navbar */
.navbar-logo{
height: 65px;
}
.navbar-style{
background-color: #f1f1f1;
padding: 20px;
}
.nav-item{
size: 1.2em;
font-weight: 700;
margin: 10px;
}
.nav-item:hover {
border-bottom: 3px solid #FFAB27;
margin-top: -3px;
}
.nav-link{
color: #000000;
}
.nav-link:hover {
color: #2E99CE;
}
.navbar-button{
background-color: #FFAB27;
border: none;
text-align: center;
border-radius: 5px;
padding: 15px 30px !important;
text-decoration: none !important;
}
.navbar-button:hover{
color: #ffffff;
background-color: #2E99CE !important;
text-decoration: none !important;
}
.nav-link-button{
color: #ffffff;
size: 1.2em;
font-weight: 700;
text-decoration: none !important;
}
.list-group-item-dark{
  color: #ffffff;
  background-color: #2E99CE;
}
/* index-banner */
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.maxallowance.com/new2022/assets/img/banner-index-00.png");
height: 700px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: -1;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.text-banner{
font-size: 3em;
font-weight: 800;
}
.text-banner-sub{
font-size: 2em;
font-weight: 600;
padding-top: 25px;
}
/* float-banner */
.float-banner{
margin-top: -50px !important;
margin-bottom: 10px;
border-radius: 15px;
background-color: #ffffff;
box-shadow: 0px 0px 10px 0px #000000;
z-index: 1;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
padding: 50px;
}
.banner-heading{
font-size: 2em;
font-weight: 800;
}
.float-banner-form{
padding: 50px 10px;
}
.float-banner-button{
size: 1.2em;
font-weight: 800;
color: #ffffff;
background-color: #FFAB27;
border: none;
text-align: center;
border-radius: 5px;
padding: 15px 35px !important;
text-decoration: none !important;
}
.float-banner-button:hover{
color: #ffffff;
background-color: #2E99CE !important;
text-decoration: none !important;
}
/* user-banner */
.user-avatar{
  border-radius: 50%;
  border: 5px solid #ffffff;
  margin: 2px 15px 2px 2px;
  box-shadow:5px 2px 5px 1px #b3b3b3;
  width: 100px;
}
.user-tag{
  background-color: #ECECEC;
  align-items: center;
  border-radius: 100px;
  padding: 1px 25px 1px 1px;
}
.user-name{
  size: 1em;
  font-weight: 800;
}
.user-mail{
  size: 1em;
}
.user-title{
  align-items: center;
  padding: 15px;
  font-weight: 800;
}
/* Page content */
.white-back{
background-color: #ffffff;   
padding: 50px 0px;
}
.blue-back{
background-color: #F4FBFF;   
margin: 0px 0px;
margin: 0px 0px; 
padding: 50px 0px;
}
.dark-blue-back{
background-color: #2E99CE;   
margin: 0px 0px;
margin: 0px 0px; 
padding: 50px 0px;
}
.gray-back{
background-color: #F1F1F1;  
margin: 0px 0px; 
padding: 50px 0px;
}
.col-padding{
padding: 10px 50px;
}
.section-heading{
color: #000000;
font-size: 2em;
font-weight: 800;
padding: 50px;
}
.section-heading::after {
content: "";
display: block;
width: 100px;
padding-top: 5px;
border-bottom: 2px solid #FFAB27;
position: absolute;
left: 52%;
}
.section-heading-02{
color: #000000;
font-size: 1.2em;
font-weight: 800;
padding: 10px;
}
.text-p{
size: 1em;
color: #000000;
padding: 10px;
}
.ico-size-01{
width: 100px;
}
.img-section{
width: 400px;
}
.float-car-banner{
margin-top: -150px !important;
}
.float-car-banner-width{
width: 150%;
}
.car-button{
font-size: 1em;
font-weight: 500;
background-color: #ffffff;
color: #2E99CE;
text-align: center;
text-decoration: none;
border-radius: 5px;
border: 2px solid #2E99CE;
padding: 15px 50px !important;
text-decoration: none !important; 
}
.car-button:hover{
background-color: #2E99CE !important;
color:#ffffff !important;
}
.accordion-button{
background-color: #f7f7f7;
size: 1.2em;
font-weight: 600;
padding: 25px;
}
.accordion-button:not(.collapsed) {
color: #000000;
background-color: #F4FBFF;
}
.bg-footer{
background-color: #2E99CE;
margin-top: 50px;
}
.footer-logo{
width: 200px;
background-color: #ffffff;
padding: 20px;
margin-bottom: 20px;
border-radius: 15px;
}

.blue-line{
  border: 1px solid #2E99CE;
  padding: 50px;
  margin-top: 15px;
  border-radius: 20px;
}
/* log-in */
.float-banner-log-in{
margin-top: 100px !important;
margin-bottom: 25px;
border-radius: 15px;
background-color: #ffffff;
box-shadow: 0px 0px 5px 0px #000000;
z-index: 1;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
padding: 50px;
}
.background-color-form{
background-color: #f1f1f1;
}
.form-button{
font-size: 1em;
font-weight: 600;
background-color: #5BC236;
border: none;
color: #ffffff;
text-align: center;
text-decoration: none;
outline: #2E99CE solid 1px;
border-radius: 5px;
padding: 15px 50px !important;
text-decoration: none !important; 
margin: 20px 50px;
}
.form-button:hover{
background-color: #ffffff !important;
color:#2E99CE !important;
}
.form-button-02{
font-size: 1em;
font-weight: 600;
background-color: #ffffff;
border: none;
color: #2E99CE;
text-align: center;
text-decoration: none;
border-radius: 5px;
padding: 15px 50px !important;
text-decoration: none !important; 
margin: 20px 50px;
}
.form-button-02:hover{
background-color: #ffffff !important;
color:#2E99CE !important;
outline: #2E99CE solid 1px;
}
/* main */
.bg-white{
background-color: #ffffff;
padding: 16px;
}
.bg-blue{
background-color: #F5F8FF;
}
.list-group-item-light{
background-color: #F5F8FF;
color: #868686;
}
.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
color: #ffffff;
background-color: #2E99CE;
}
/* Responsive navigation (for mobile devices) */
@media screen and (max-width: 600px) {
    /* navbar - mobile */
    .navbar-logo{
    height: 50px;
    }
    .navbar-toggler {
    border: 1px solid #2E99CE;
    }
    /* index-banner - mobile */
    .hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.maxallowance.com/new2022/assets/img/banner-index-00.png");
    height: 250px;
    }
    .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-12%, -50%);
    }
    .banner-heading{
    font-size: 1.2em;
    font-weight: 800;
    }
    .text-banner{
    font-size: 1.2em;
    }
    .text-banner-sub{
    font-size: 1.2em;
    padding-top: 10px;
    } 
    /* float-banner - mobile */
    .float-banner{
    margin-top: -20px !important;
    border-radius: 15px;
    background-color: #ffffff;
    z-index: 1;
    width: 90%;
    padding: 20px;
    }
    .float-banner-form{
    padding: 10px;
    }
    /* user-banner */
    .user-avatar{
      border-radius: 50%;
      border: 3px solid #ffffff;
      margin: 2px 2px 2px 2px;
      box-shadow:5px 2px 5px 1px #b3b3b3;
      width: 85px;
    }
    .user-tag{
      background-color: #ECECEC;
      align-items: center;
      border-radius: 10px;
      padding: 10px;
    }
    .user-name{
      size: 1em;
      font-weight: 800;
    }
    .user-mail{
      size: 1em;
    }
    /* page - content */
    .section-heading{
    font-size: 1.2em;
    font-weight: 800;
    padding: 10px 20px;
    }
    .section-heading-02{
    color: #000000;
    font-size: 1em;
    font-weight: 800;
    padding: 10px;
    }
    .ico-size-01{
    width: 75px;
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
    }
    .img-section{
    width: 250px;
    }
    .float-car-banner{
    margin-top: 50px !important;
    }
    .float-car-banner-width{
    width: 100%;
    }
    .blue-line{
      border: 1px solid #2E99CE;
      padding: 10px;
      margin-top: 15px;
      border-radius: 20px;
    }
    /* log-in */
    .float-banner-log-in{
    margin-top: 50px !important;
    margin-bottom: 25px;
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 0px #000000;
    z-index: 1;
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    }
}