@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
/* GENERAL */
html, body{
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: "Nunito Sans", sans-serif;
  color: #3A5771;
}
body{
  background: var(--Background, linear-gradient(90deg, #F2F8FF 0%, #FBFDFF 100%));
  overflow-x: hidden;
}
.blue-font {
  color: #0D599E;
}
.dark-font {
  color: #3A5771;
}
.gray-font {
  color: #6A859E;
}
.red-font {
  color: #F04770;
}
.orange-font {
  color: #F67C24;
}
.green-font {
  color: #06D7A0;
}
.yellow-font {
  color: #FCC74E;
}
.white-font {
  color: #ffffff;
}
.font-10 {
  font-size: 10px;
}
.font-12 {
  font-size: 12px;
}
.font-13 {
  font-size: 13px;
}
.font-14 {
  font-size: 14px;
}
.font-15 {
  font-size: 15px;
}
.font-16 {
  font-size: 16px;
}
.font-18 {
  font-size: 18px;
}
.font-20 {
  font-size: 20px;
}
.font-24 {
  font-size: 24px;
}
.font-26 {
  font-size: 26px;
}
.font-34 {
  font-size: 34px;
}
.medium {
  font-weight: 500;
}
.semi-bold {
  font-weight: 600;
}
.bold-font {
  font-weight: 700;
}
.extra-bold {
  font-weight: 800;
}
.black-font {
  font-weight: 900;
}
.w-110 {
  width: 110px;
}
.w-150 {
  width: 150px;
}
.w-200 {
  width: 200px;
}
.w-300{
  width: 300px;
}
header{
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 70px;
}
/* END GENERAL */

/* SCROLL */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: #3A5771;
  border-radius: 5px;
}
/* NAVBAR */
.nav-list-cg{
  white-space: normal;
}
nav .dropdown-menu[data-bs-popper]{
  left: -370px;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
  color: #0D599E;
  font-weight: bold;
}
nav .dropdown-menu{
  border: none;
  border-radius: 10px;
  box-shadow: 0 8px 16px 0 rgba(163, 172, 185, .2);
  padding: 25px 15px;
}
nav .dropdown-item{
  margin: 5px 0px;
}
nav .dropdown-item.active, nav .dropdown-item:active{
  color: #06D7A0;
  background-color: var(--bs-dropdown-link-hover-bg);
}
nav .dropdown-item:hover h6{
  color: #06D7A0;
}
.menu-navbar{
  width: 800px;
  flex-wrap: wrap;
}
.dropdownArrow {
  position: absolute;
  top: -6px;
  left: 0;
  margin: 0 0 0 -6px;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
  background: #fff;
  will-change: transform;
  transition-property: transform;
  transition-duration: .25s;
}
.icon-nav{
  display: inline-block;
  width: 30px;
  height: 30px;
  min-width: 30px;
  background-size: cover;
}
.icon-admin{
  background-image: url('../images/nav-icon/admin.svg');
}
nav .dropdown-item:hover .icon-admin{
  background-image: url('../images/nav-icon/admin-green.svg');
}
.icon-directive{
  background-image: url('../images/nav-icon/directive.svg');
}
nav .dropdown-item:hover .icon-directive{
  background-image: url('../images/nav-icon/directive-green.svg');
}
.icon-property{
  background-image: url('../images/nav-icon/property.svg');
}
nav .dropdown-item:hover .icon-property{
  background-image: url('../images/nav-icon/property-green.svg');
}
.icon-resident{
  background-image: url('../images/nav-icon/resident.svg');
}
nav .dropdown-item:hover .icon-resident{
  background-image: url('../images/nav-icon/resident-green.svg');
}
.icon-security{
  background-image: url('../images/nav-icon/security.svg');
}
nav .dropdown-item:hover .icon-security{
  background-image: url('../images/nav-icon/security-green.svg');
}
.icon-finance{
  background-image: url('../images/nav-icon/finance.svg');
}
nav .dropdown-item:hover .icon-finance{
  background-image: url('../images/nav-icon/finance-green.svg');
}
.icon-mobile{
  background-image: url('../images/nav-icon/mobile.svg');
}
nav .dropdown-item:hover .icon-mobile{
  background-image: url('../images/nav-icon/mobile-green.svg');
}
.icon-costumer{
  background-image: url('../images/nav-icon/question.svg');
}
nav .dropdown-item:hover .icon-costumer{
  background-image: url('../images/nav-icon/question-green.svg');
}
.navbar-glass {
  background-color: transparent;
}
.navbar-glass.scrolled {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 3px 32px rgba(0, 0, 0, 0.25);
}
/* END NAVBAR */

/* BUTTONS */
.btn{
  padding: 12px 24px;
}
.btn-green {
  background-color: #06D7A0;
  color: #ffffff;
  border: 1px solid #06D7A0;
}
.btn-green:hover,
.btn-green.active,
.btn-green.show,
.btn-green:active {
  background-color: #06D7A0 !important;
  color: #ffffff !important;
  border: 1px solid #06D7A0 !important;
}
.btn-green-light {
  background-color: #DEFFE9;
  color: #0D599E;
  border: 1px solid #DEFFE9;
}
.btn-green-light:hover,
.btn-green-light.active,
.btn-green-light.show,
.btn-green-light:active {
  background-color: #06D7A0 !important;
  color: #ffffff !important;
  border: 1px solid #06D7A0 !important;
}
.btn-blue-line {
  background-color: transparent;
  color: #0D599E;
  border: 1px solid #0D599E;
}
.btn-blue-line:hover,
.btn-blue-line.active,
.btn-blue-line.show,
.btn-blue-line:active {
  background-color: #0D599E !important;
  color: #ffffff !important;
  border: 1px solid #0D599E !important;
}
.btn-white-line {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  font-weight: bold;
}
.btn-white-line:hover,
.btn-white-line.active,
.btn-white-line.show,
.btn-white-line:active {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}
/* END BUTTONS */

/* DEMO */
.demo{
  background-color: #06D7A0;
  border-radius: 10px;
  padding: 50px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 15px 0 rgba(0, 0, 0, 0.07);
  margin: 60px 30px;
}
/* END DEMO */

/* HOME */
.header-01{
  background-image: url('../images/backgrounds/01.svg');
  background-position-x: right;
}
.card-home{
  background-color: #ffffff;
  border-radius: 35px;
  padding: 25px;
  box-shadow: 21px 27px 50px 3px rgba(160, 160, 160, 0.17)
}
.background-01{
  border-radius: 10px;
  background: var(--dregrade, linear-gradient(270deg, #FFF6F0 45.99%, var(--Color, #D8E9FA) 97.32%));
  padding: 35px 0px;
  margin: 120px 0px 60px 0px;
}
.background-01 img{
  margin-top: -120px;
}
.background-02{
  background-color: #FFF6F0;
  padding: 30px 30px 0px 30px;
}
.background-02 .card-home{
  margin-bottom: 30px;
}
/* END HOME */

/* ADMINISTRATION */
.header-02{
  background-image: url('../images/backgrounds/02.svg');
  background-position-x: center;
  background-position-y: top;
}
.background-03{
  border-radius: 20px;
  background: linear-gradient(270deg, #FFF6F0 11.52%, var(--Color, #D8E9FA) 78.88%);
  padding: 0px 30px 0px 60px;
  margin-top: 170px;
}
.margin-negative{
  margin-bottom: -120px;
  margin-top: 50px;
}
.img-building{
  margin-top: -150px;
}
.background-04{
  border-radius: 10px;
  background: linear-gradient(270deg, #FFF6F0 45.99%, var(--Color, #D8E9FA) 97.32%);
  padding: 30px;
  margin: 180px 0px;
}
.background-04 .img-negative{
  margin: -120px 0px;
}
.background-05{
  border-radius: 10px;
  background: #FFF6F0;
  padding: 35px 0px;
  margin: 60px 0px;
}
.background-05 .dashboard{
  margin-top: -120px;
}
.admin-list{
  margin: 30px 50px 50px 30px;
}
/* END ADMINISTRATION */

/* DIRECTIVE */
.background-06{
  border-radius: 10px;
  background: linear-gradient(270deg, #FFF6F0 11.52%, var(--Color, #D8E9FA) 78.88%);
  padding: 30px;
  margin: 70px 0px;
}
.directive-img{
  margin: -70px 0px;
}
.background-07{
  border-radius: 10px;
  background: linear-gradient(265deg, var(--Color, #D8E9FA) 38.79%, #FFF6F0 62.71%);
  padding: 35px 0px;
  margin: 150px 0px 60px 0px;
}
.background-07 img{
  margin-top: -120px;
}
/* END DIRECTIVE */

/* OWNER */
.background-08{
  background-color: #FFF6F0;
  border-radius: 10px;
  padding: 0px 30px;
  margin-top: 50px;
}
.owner-plan{
  margin: -30px 0px;
}
.background-09{
  background-color: #0D599E;
  border-radius: 10px;
  padding: 0px 30px;
  margin: 120px 0px 200px 0px;
}
.background-09 img{
  margin: -120px 0px;
}
/* END OWNER */

/* RESIDENT */
.background-10{
  background-color: #0D599E;
  border-radius: 10px;
  padding: 0px 30px;
  margin-top: 50px;
  margin: 80px 0px 200px 0px;
}
.resident-negative{
  margin: -50px 0px;
}
/* END RESIDENT */

/* PORTER */
.background-11{
  background-color: #D8E9FA;
  border-radius: 10px;
  padding: 0px 30px;
  margin: 80px 0px 200px 0px;
}
/* END PORTER */

/* FINANCE */
.background-12{
  border-radius: 10px;
  background: var(--Degrade, linear-gradient(270deg, #FFF6F0 45.99%, var(--Color, #D8E9FA) 97.32%));
  padding: 30px 30px 0px 30px;
  margin: 30px 0px;
}
.background-13{
  border-radius: 10px;
  background: #BBF9E9;
  padding: 30px 0px 0px 30px;
}
/* END FINANCE */

/* MOBILE */
.card-orange{
  background-color: #FFF6F0;
  border-radius: 10px;
  padding: 30px 25px;
}
.card-orange .circle-white{
  background-color: #ffffff;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  align-items: center;
  display: flex;
  justify-content: center;
}
/* END MOBILE */

/* CONTACT US */
.header-03{
  background-image: url('../images/backgrounds/03.svg');
  background-position-x: left;
  background-position-y: top;
  height: 100svh;
}
.form-control::placeholder {
  color: #C7C7C7;
  opacity: 1;
}
.form-label{
  font-size: 14px;
  color: #0D599E;
  font-weight: bold;
  margin-bottom: 5px;
}
.form-control{
  font-size: 14px;
  min-height: 50px;
  border-radius: 4px;
  color: #3A5771;
  border: 2px solid #b0c7dd;
}
.form-select{
  height: 50px;
  font-size: 14px;
  color: #3A5771;
  border: 2px solid #b0c7dd;
}
/* END CONTACT US */

/* SERVICE */
.card-white{
  border-radius: 10px;
  background-color: #ffffff;
  padding: 30px;
}
.card-white .accordion-button:not(.collapsed){
  background-color: #f3f3f3;
}
.card-white .accordion-button:focus{
  box-shadow: none;
}
/* END SERVICE */

/* PLANS */
.background-14{
  margin: 70px 0px;
}
.card-plan{
  background-color: #ffffff;
  border-radius: 20px;
  padding: 35px;
  box-shadow: 21px 27px 50px 3px rgba(160, 160, 160, 0.17)
}
.card-head-plan{
  min-height: 200px;
}
.card-body-plan{
  min-height: 600px;
}
.border-green{
  border: #06D7A0 2px solid ;
}
.table{
  border-collapse: separate;
  border-spacing: 0 15px;
}
.table thead th{
  background-color: transparent;
  color: #0D599E;
  font-size: 14px;
}
.table tbody td{
  background-color: #E7F0F9;
}
/* END PLANS */

/* RESPONSIBE */
@media (max-width: 575.98px) { 
  .background-01 img, .background-07 img, .background-05 .dashboard{
    margin-top: inherit;
  }
  .background-01{
    margin-top: 0px;
  }
  .demo button{
    margin-top: 25px;
  }
  .demo h2, .demo h6{
    text-align: center;
  }
  .header-01 h1{
    margin-top: 30px;
  }
  .menu-navbar{
    width: auto;
  }
  .dropdownArrow {
    display: none;
  }
  nav .w-200{
    width: 100%;
    margin: 5px 0px;
  }
  .navbar-glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  .background-03{
    padding: 0px;
    margin-top: 0px;
  }
  .admin-list {
    margin: 30px 20px 0px 20px;
  }
  .header-02 h1, .header-02 h6{
    text-align: center;
  }
  .img-building {
    margin-top: 0px;
  }
  .margin-negative {
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .background-04 .img-negative {
    margin: 0px;
  }
  .background-04{
    margin: 50px 0px 0px;
  }
  .owner-plan {
    margin: 0px;
  }
  .background-08{
    margin-top: 0px;
  }
  .background-09 img {
    margin: 0px;
  }
  .background-09{
    padding: 30px;
  }
  .directive-img{
    margin: 0px;
  }
  .background-06{
    margin-top: 0px;
  }
  .background-07{
    margin: 30px 0px 0px 0px;
    padding: 25px;
  }
  .resident-negative {
    margin: 0px;
  }
  .background-10{
    margin: 20px 0px;
    padding: 30px;
  }
  .background-11 {
    padding: 30px;
    margin: 0px 0px 200px 0px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px){
  .background-01 img, .background-07 img, .background-05 .dashboard{
    margin-top: inherit;
  }
  .demo button{
    margin-top: 25px;
  }
  .demo h2, .demo h6{
    text-align: center;
  }
  .header-01 h1{
    margin-top: 30px;
  }
  .menu-navbar{
    width: auto;
  }
  .dropdownArrow {
    display: none;
  }
  nav .w-200{
    width: 50%;
    margin: 5px 0px;
  }
  .navbar-glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  .header-02 h1, .header-02 h6{
    text-align: center;
  }
  .background-03{
    padding: 0px;
    margin-top: 0px;
  }
  .admin-list {
    margin: 30px 20px 0px 20px;
  }
  .header-02 h1, .header-02 h6{
    text-align: center;
  }
  .img-building {
    margin-top: 0px;
  }
  .margin-negative {
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .background-04 .img-negative {
    margin: 0px;
  }
  .background-04{
    margin: 50px 0px 0px;
  }
  .owner-plan {
    margin: 0px;
  }
  .background-08{
    margin-top: 0px;
  }
  .background-09 img {
    margin: 0px;
  }
  .background-09{
    padding: 30px;
  }
  .directive-img{
    margin: 0px;
  }
  .background-06{
    margin-top: 0px;
  }
  .background-07{
    margin: 30px 0px 0px 0px;
    padding: 25px;
  }
  .resident-negative {
    margin: 0px;
  }
  .background-10{
    margin: 20px 0px;
    padding: 30px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px){
  .background-01{
    margin: 60px 0px;
    padding: 25px 15px;
  }
  .background-01 img, .background-07 img, .background-05 .dashboard{
    margin-top: inherit;
  }
  .menu-navbar{
    width: auto;
  }
  .dropdownArrow {
    display: none;
  }
  .navbar-glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  .background-03{
    padding: 25px 25px 0px 25px;
    margin-top: 0px;
  }
  .admin-list {
    margin: 0px;
  }
  .img-building {
    margin-top: 0px;
  }
  .margin-negative {
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .background-04 .img-negative {
    margin: 0px;
  }
  .background-04{
    margin: 50px 0px 0px;
  }
  .background-05 {
    padding: 35px 20px 35px 0px;
  }
  .background-09 img {
    margin: 0px;
  }
  .background-09{
    padding: 30px;
    margin: 50px 0px;
  }
  .background-06{
    margin: 30px 0px;
  }
  .background-07{
    margin: 30px 0px;
  }
  .background-10 {
    padding: 30px;
    margin: 20px 0px 200px 0px;
  }
  .background-11 {
    margin: 0px 0px 200px 0px;
    padding: 30px;
  }
}