@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100..900&display=swap");

body {
  font-family: "Encode Sans", sans-serif;
}

.barranav {
  background-color: rgb(255, 255, 255);
  height: 80px;
}

.menuOp {
  color: #004563 !important;
  font-size: larger;
}

.logo {
  text-align: center;
  width: auto;
  height: 5.625rem;
}

.imgContainer {
  position: relative;
  color: white;
}

.txtImgContainer {
  position: absolute;
  top: 27%;
  left: 30%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  width: 35%;
  font-weight: bold;
}

.lightTxtImgContainer {
  position: absolute;
  top: 69%;
  left: 30%;
  transform: translate(-50%, -50%);
  font-size: 0.6rem;
  width: 35%;
}

.txtImgContainerSobre {
  position: absolute;
  top: 46%;
  left: 25%;
  transform: translate(-50%, -50%);
  font-size: 3.5rem;
  width: 25%;
  font-weight: 500;
  line-height: 4.1rem;
}

.belowBanner {
  background-color: lightgray;
  text-align: center;
}

.belowBannerSobre {
  background-color: lightgray;
  text-align: justify;
  color: #004563;
}

.belowBanner p {
  margin: 0;
  font-size: 1.7rem;
  color: #004563;
  padding: 2.813rem 10rem 2.813rem 10rem;
}

.cards {
  margin: 30px 20px 30px 20px;
}

.cardsSobre {
  text-align: center;
}

.card {
  border: none;
  padding: 20px 60px 20px 60px;
}

.card-body {
  box-shadow: rgba(33, 35, 38, 0.1) 0px 15px 17px -10px;
}

.card p {
  text-align: center;
  color: #004563;
  font-size: 18px;
}

.card i {
  text-align: center;
  font-size: 3.125rem;
  color: #004563;
  padding-bottom: 2rem;
}

.card p b {
  font-size: 26px;
}

.card h3 {
  color: #004563;
  text-align: center;
  font-weight: 700;
  padding-bottom: 2rem;
}

a {
  text-decoration: none;
  color: #004563;
}

.form {
  background-color: #afc3caff;
}

.form h2 {
  color: white;
}

.confEmail {
  color: #afc3caff;
}

.butn {
  text-align: center;
  padding: 0 0 1rem 0;
}

.btn {
  --bs-btn-color: #0077a3;
  --bs-btn-border-color: #0077a3;
  --bs-btn-hover-color: white;
  --bs-btn-hover-bg: #0077a3;
}

.caroussel-inner {
  height: 0;
  padding-bottom: 25%;
}

.caroussel-item {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.caroussel-item img {
  height: 100%;
  object-fit: cover;
}

.footer-copyright {
  background-color: #0077a3;
  color: white;
  text-align: center;
}

.imgLogoWhite {
  height: auto;
  width: 5.2rem;
}

.footerMgl {
  background-color: #004660;
}

.endereco {
  color: white;
}

.contato {
  color: white;
}

.textofooter i {
  color: white;
}

/* Galaxy Fold */

@media (width < 18rem) {
  .logo {
    text-align: center;
    width: auto;
    height: 3.75rem;
  }

  .menuOp {
    font-size: small;
    padding-left: 1.4rem;
  }

  .txtImgContainer {
    position: absolute;
    top: 27%;
    left: 30%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    width: 35%;
  }

  .lightTxtImgContainer {
    position: absolute;
    top: 69%;
    left: 30%;
    transform: translate(-50%, -50%);
    font-size: 0.6rem;
    width: 35%;
  }

  .txtImgContainerSobre {
    position: absolute;
    top: 46%;
    left: 25%;
    transform: translate(-50%, -50%);
    font-size: 0.5rem;
    width: 25%;
    font-weight: 500;
    line-height: 0.7rem;
  }

  .belowBanner p {
    font-size: 0.7rem;
    padding: 1.4rem 1.5rem 1.4rem 1.5rem;
  }

  .belowBannerSobre p {
    font-size: 0.7rem;
    padding: 1rem 2rem 1rem 2rem;
  }

  .card {
    padding: 20px 17px 20px 17px;
  }

  .card i {
    font-size: 2rem;
  }

  .card-body h3 {
    font-size: 0.9rem;
  }

  .card-body p {
    font-size: 0.7rem;
  }

  .emailCards {
    font-size: 0.8rem !important;
    padding-top: 1rem;
  }

  form {
    margin: 1.4rem;
  }

  form h2 {
    padding-top: 1rem;
  }

  .carousImg {
    height: auto;
    width: 7rem;
    margin-left: auto;
    margin-right: auto;
  }

  .caroussel {
    height: 6rem;
  }

  .footerMgl {
    padding-top: 1rem;
  }

  .logoWhite {
    text-align: center;
  }

  .imgLogoWhite {
    height: auto;
    width: 5.2rem;
  }

  .contato {
    text-align: center;
  }

  .endereco {
    padding: 0 2rem 2rem 2rem;
    margin-bottom: 0;
  }

  .textoFooter {
    font-size: small;
  }

  .footerMglMid {
    display: none;
  }

  .textoFooter i {
    font-size: 1.5rem;
    padding: 1rem 0.5rem 2rem 2rem;
  }
}

@media (18rem < width < 24rem) {
  .menuOp {
    font-size: medium;
    padding-left: 1.7rem;
  }

  .txtImgContainer {
    position: absolute;
    top: 39%;
    left: 28%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    width: 31%;
    font-weight: bold;
  }

  .lightTxtImgContainer {
    position: absolute;
    top: 66%;
    left: 29%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    width: 33%;
  }

  .txtImgContainerSobre {
    position: absolute;
    top: 46%;
    left: 25%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    width: 27%;
    font-weight: 500;
    line-height: 0.9rem;
  }

  .belowBanner p {
    font-size: 0.7rem;
    padding: 1.5rem 1rem 1.5rem 1rem;
  }

  .belowBannerSobre p {
    font-size: 0.7rem;
    padding: 2rem 2rem 2rem 2rem;
  }

  .card {
    padding: 1.25rem 2.688rem 1.25rem 2.688rem;
  }

  .card i {
    font-size: 2rem;
  }

  .card-body h3 {
    font-size: 1.2rem;
  }

  .card-body p {
    font-size: 1rem;
  }

  .emailCards {
    font-size: 1rem !important;
    padding-top: 1rem;
  }

  form {
    margin: 1.4rem;
  }

  form h2 {
    padding-top: 1rem;
  }

  .carousImg {
    height: auto;
    width: 7rem;
    margin-left: auto;
    margin-right: auto;
  }

  .caroussel {
    height: 6rem;
  }

  .contato {
    padding: 0 0 0 1rem;
  }

  .endereco {
    padding: 0 0 0 1rem;
  }

  .footerMgl {
    padding: 1rem 1rem 1rem 1rem;
  }

  .footerMglMid {
    display: none;
  }

  .textoFooter i {
    font-size: 2rem;
    padding: 1rem;
  }
}

@media (24rem < width < 36rem) {
  .menuOp {
    font-size: medium;
    padding-left: 1.7rem;
  }

  .txtImgContainer {
    position: absolute;
    top: 33%;
    left: 26%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    width: 31%;
    font-weight: bold;
  }

  .lightTxtImgContainer {
    position: absolute;
    top: 66%;
    left: 29%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    width: 38%;
  }

  .txtImgContainerSobre {
    position: absolute;
    top: 46%;
    left: 25%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    width: 31%;
    font-weight: 500;
    line-height: 1.1rem;
  }

  .belowBanner p {
    font-size: 0.9rem;
    padding: 1.5rem 2rem 1.5rem 2rem;
  }

  .belowBannerSobre p {
    font-size: 0.9rem;
    padding: 2rem 2rem 2rem 2rem;
  }

  .card {
    padding: 1.25rem 2.688rem 1.25rem 2.688rem;
  }

  .card i {
    font-size: 2rem;
  }

  .card-body {
    text-align: center;
  }

  .card-body h3 {
    font-size: 1.2rem;
  }

  .card-body p {
    font-size: 1rem;
  }

  .emailCards {
    font-size: 1.1rem !important;
    padding-top: 1rem;
  }

  form {
    margin: 1.4rem;
  }

  form h2 {
    padding-top: 1rem;
  }

  .caroussel {
    height: 6rem;
  }

  .carousImg {
    height: auto;
    width: 7rem;
    margin-left: auto;
    margin-right: auto;
  }

  .contato {
    padding: 0 0 0 1rem;
  }

  .endereco {
    padding: 0 0 0 1rem;
  }

  .footerMgl {
    padding: 1rem 1rem 1rem 2rem;
  }

  .footerMglMid {
    display: none;
  }

  .textoFooter i {
    font-size: 2rem;
    padding: 1rem;
  }
}

@media (36rem < width) {
  .container {
    padding-left: 1rem;
  }

  .containerSectionLine {
    margin-right: 1.25rem;
  }

  .sectionLine {
    background-color: rgb(190 189 208);
    width: 2px;
    height: 35px;
  }

  .logo {
    width: auto;
    height: 3.625rem;
  }

  .menuOp {
    font-size: 0.8rem;
    padding-left: 0.7rem;
  }

  .txtImgContainer {
    position: absolute;
    top: 33%;
    left: 26%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    width: 31%;
    font-weight: bold;
    line-height: normal;
  }

  .lightTxtImgContainer {
    position: absolute;
    top: 59%;
    left: 29%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    width: 37%;
    line-height: normal;
  }

  .txtImgContainerSobre {
    position: absolute;
    top: 46%;
    left: 28%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    width: 27%;
    font-weight: 500;
    line-height: 1.2rem;
  }

  .belowBanner p {
    font-size: 1.1rem;
    padding: 2rem 3rem 2rem 3rem;
  }

  .belowBannerSobre p {
    font-size: 1.2rem;
    padding: 3rem 4rem 3rem 4rem;
  }

  .card {
    padding: 1.25rem 2.688rem 1.25rem 2.688rem;
  }

  .card i {
    font-size: 2rem;
    padding-bottom: 1rem;
  }

  .card-body h3 {
    font-size: 1.2rem;
    padding-bottom: 1rem;
  }

  .card-body p {
    font-size: 1rem;
  }

  .emailCards {
    font-size: 1.5rem !important;
    padding-top: 1rem;
  }

  form {
    margin: 1.4rem;
  }

  form h2 {
    padding: 1rem 0 1rem 0;
    font-size: 1.8rem;
  }

  .form-label {
    font-size: 1rem;
  }

  .form-text {
    font-size: 1.4rem;
  }

  .caroussel {
    height: 7.5rem;
  }

  .carousImg {
    height: auto;
    width: 10rem;
    margin-left: auto;
    margin-right: auto;
  }

  .contato {
    font-size: large;
  }

  .endereco {
    padding: 0 0 0 0;
  }

  .footer-copyright {
    font-size: 1rem;
  }

  .footerMgl {
    padding: 1rem 1rem 1rem 1rem;
  }

  .imgLogoWhite {
    height: auto;
    width: 7rem;
  }

  .footerMgl {
    display: none;
  }

  .footerMglMid {
    display: block;
    background-color: #004660;
    padding: 2rem 0 2rem 2rem;
  }

  .containerSectionLineFooter {
    padding-left: 1rem;
  }

  .sectionLineFooter {
    background-color: rgb(255, 255, 255);
    width: 2px;
    height: 7.063rem;
  }

  .textoFooter p {
    margin: 0;
  }

  .textoFooter i {
    font-size: 2rem;
    padding: 0.5rem;
  }
}
/* #TODO */
@media (47rem < width) {
  .container {
    padding-left: 3.5rem;
  }

  .containerSectionLine {
    margin-right: 1.25rem;
    padding-left: 0.5rem;
  }

  .sectionLine {
    background-color: rgb(190 189 208);
    width: 2px;
    height: 4.063rem;
  }

  .menuOp {
    font-size: 1rem;
    padding-left: 1.7rem;
  }

  .txtImgContainer {
    position: absolute;
    top: 31%;
    left: 24%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    width: 25%;
    font-weight: bold;
    line-height: 1.8rem;
  }

  .lightTxtImgContainer {
    position: absolute;
    top: 55%;
    left: 29.5%;
    transform: translate(-50%, -50%);
    font-size: 1.4rem;
    width: 36%;
    line-height: 1.7rem;
  }

  .txtImgContainerSobre {
    position: absolute;
    top: 46%;
    left: 29%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    width: 31%;
    font-weight: 500;
    line-height: 2rem;
  }

  .belowBanner p {
    font-size: 1rem;
    padding: 2rem 9rem 2rem 9rem;
  }

  .belowBannerSobre p {
    font-size: 1.6rem;
    padding: 4rem 6rem 4rem 6rem;
  }

  .cards {
    margin: 3rem 7rem 3rem 7rem;
  }

  .cardsSobre {
    margin: 1rem 4rem 1rem 4rem;
  }

  .card {
    padding: 1.25rem 0.688rem 4.25rem 0.688rem;
  }

  .card i {
    font-size: 2.2rem;
  }

  .card-body h3 {
    font-size: 1.2rem;
  }

  .emailCards {
    font-size: 0.8rem !important;
    padding-top: 1rem;
  }

  .card-body p {
    font-size: 0.8rem;
  }

  form {
    margin: 3.4rem 3.4rem 0 3.4rem;
    padding: 1rem 10rem 1rem 10rem;
  }

  form h2 {
    padding: 2rem 0 1rem 0;
    font-size: 2.2rem;
  }

  .form-label {
    font-size: 1.2rem;
  }

  .form-text {
    font-size: 1rem;
  }

  .caroussel {
    height: 6rem;
  }

  .carousImg {
    height: auto;
    width: 7rem;
    margin-left: auto;
    margin-right: auto;
  }

  .contato {
    font-size: large;
  }

  .endereco {
    padding: 0 0 0 0;
  }

  .footer-copyright {
    font-size: 1rem;
  }

  .footerMgl {
    display: none;
  }

  .footerMgl {
    padding: 1rem 1rem 1rem 1rem;
  }

  .logoWhite {
    padding-left: 10%;
  }

  .imgLogoWhite {
    height: auto;
    width: 7rem;
  }

  .footerMglMid {
    display: block;
    background-color: #004660;
    padding: 2rem 0 2rem 3rem;
  }

  .containerSectionLineFooter {
    margin-right: 1.25rem;
    padding-left: 0.5rem;
  }

  .sectionLineFooter {
    background-color: rgb(255, 255, 255);
    width: 2px;
    height: 4.063rem;
  }

  .textoFooter p {
    margin: 0;
  }
}

/* #TODO */
@media (62rem < width) {
  .container {
    padding-left: 5rem;
  }

  .logo {
    width: auto;
    height: 4rem;
  }

  .containerSectionLine {
    margin-right: 1.25rem;
    padding-left: 2.5rem;
  }

  .sectionLine {
    background-color: rgb(190 189 208);
    width: 2px;
    height: 3.438rem;
  }

  .menuOp {
    font-size: 1.2rem;
    padding-left: 3rem;
  }

  .txtImgContainer {
    position: absolute;
    top: 33%;
    left: 28%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    width: 25%;
    font-weight: 500;
    line-height: 2.1rem;
  }

  .lightTxtImgContainer {
    position: absolute;
    top: 52%;
    left: 28.5%;
    transform: translate(-50%, -50%);
    font-size: 1.7rem;
    width: 26%;
    font-weight: 100;
    line-height: 2.1rem;
  }

  .belowBanner p {
    font-size: 1.4rem;
    padding: 3rem 7rem 3rem 7rem;
  }

  .cards {
    margin: 3.125rem 5rem 3.125rem 5rem;
  }

  .card {
    padding: 1.25rem 0.688rem 4.25rem 0.688rem;
  }

  .card i {
    font-size: 3.5rem;
  }

  .card-body h3 {
    font-size: 1.4rem;
  }

  .card-body p {
    font-size: 1.2rem;
  }

  form {
    margin: 1.2rem;
    padding: 1rem 10rem 1rem 10rem;
  }

  form h2 {
    padding: 1rem 0 1rem 0;
    font-size: 2.2rem;
  }

  .form-label {
    font-size: 1.4rem;
  }

  .form-text {
    font-size: 1.4rem;
  }

  .butn {
    text-align: center;
    padding: 2rem 0 3rem 0;
  }

  .caroussel {
    height: 10rem;
  }

  .carousImg {
    height: auto;
    width: 15rem;
    margin-left: auto;
    margin-right: auto;
  }

  .contato {
    font-size: large;
  }

  .endereco {
    padding: 0 0 0 0;
  }

  .footer-copyright {
    font-size: 1.4rem;
  }

  .footerMgl {
    padding: 1rem 1rem 1rem 1rem;
  }

  .logoWhite {
    padding-left: 10%;
  }

  .imgLogoWhite {
    height: auto;
    width: 8.2rem;
  }

  .containerSectionLineFooter {
    margin-right: 0.25rem;
    padding-left: 1.5rem;
  }

  .sectionLineFooter {
    background-color: rgb(255, 255, 255);
    width: 2px;
    height: 4.063rem;
  }

  .footerMgl {
    display: none;
  }

  .footerMglMid {
    display: block;
    background-color: #004660;
  }

  .textoFooter p {
    margin: 0;
  }
}

@media (75rem < width) {
  .container {
    padding-left: 6rem;
  }

  .logo {
    width: auto;
    height: 4rem;
  }

  .containerSectionLine {
    margin-right: 1.25rem;
    padding-left: 4rem;
  }

  .sectionLine {
    background-color: rgb(190 189 208);
    width: 2px;
    height: 3.438rem;
  }

  .menuOp {
    font-size: 1.4rem;
    padding-left: 5rem;
  }

  .txtImgContainer {
    position: absolute;
    top: 33%;
    left: 28%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    width: 25%;
    font-weight: bold;
    line-height: 2.1rem;
  }

  .lightTxtImgContainer {
    position: absolute;
    top: 50%;
    left: 29.3%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    width: 28%;
    line-height: 2.1rem;
  }

  .belowBanner p {
    font-size: 1.7rem;
    padding: 2rem 14rem 2rem 14rem;
  }

  .belowBannerSobre p {
    font-size: 1.8rem;
    padding: 4rem 7rem 4rem 7rem;
  }

  .cards {
    margin: 3.125rem 5rem 3.125rem 5rem;
  }

  .card {
    padding: 1.25rem 3rem 4.25rem 3rem;
  }

  .cardSobre {
    padding: 1.25rem 1rem 1.25rem 1rem;
  }

  .card i {
    font-size: 3.5rem;
  }

  .card-body h3 {
    font-size: 1.4rem;
  }

  .card-body p {
    font-size: 1.2rem;
  }

  .emailCards {
    font-size: 1rem !important;
    padding-top: 1.2rem;
  }

  form {
    margin: 1.4rem;
    padding: 1rem 10rem 1rem 10rem;
  }

  form h2 {
    padding: 1rem 0 1rem 0;
    font-size: 2.2rem;
  }

  .form-label {
    font-size: 1.4rem;
  }

  .form-text {
    font-size: 1.4rem;
  }

  .caroussel {
    height: 10rem;
  }

  .carousImg {
    height: auto;
    width: 15rem;
    margin-left: auto;
    margin-right: auto;
  }

  .contato {
    font-size: large;
  }

  .endereco {
    padding: 0 0 0 0;
  }

  .footer-copyright {
    font-size: 1.4rem;
  }

  .footerMgl {
    padding: 1rem 1rem 1rem 1rem;
  }

  .logoWhite {
    padding-left: 12.2%;
  }

  .imgLogoWhite {
    height: auto;
    width: 11rem;
  }

  .containerSectionLineFooter {
    margin-right: 0.25rem;
    padding-left: 1.5rem;
  }

  .sectionLineFooter {
    background-color: rgb(255, 255, 255);
    width: 2px;
    height: 7.063rem;
  }

  .footerMgl {
    display: none;
  }

  .footerMglMid {
    display: block;
    background-color: #004660;
  }

  .textoFooter p {
    margin: 0;
  }
}

@media (111rem < width) {
  .container {
    padding-left: 0;
  }

  .logo {
    width: auto;
    height: 7.625rem;
  }

  .containerSectionLine {
    margin-right: 1.25rem;
    padding-left: 2.5rem;
  }

  .sectionLine {
    background-color: rgb(190 189 208);
    width: 2px;
    height: 3.438rem;
  }

  .menuOp {
    font-size: 2.1rem;
    padding-left: 4rem;
  }

  .txtImgContainer {
    position: absolute;
    top: 33%;
    left: 28%;
    transform: translate(-50%, -50%);
    font-size: 3.5rem;
    width: 25%;
    font-weight: 500;
    line-height: 4.1rem;
  }

  .lightTxtImgContainer {
    position: absolute;
    top: 54%;
    left: 31.3%;
    transform: translate(-50%, -50%);
    font-size: 3.4rem;
    width: 32%;
    line-height: 4.1rem;
    font-weight: 100;
  }

  .txtImgContainerSobre {
    position: absolute;
    top: 46%;
    left: 25%;
    transform: translate(-50%, -50%);
    font-size: 3.5rem;
    width: 25%;
    font-weight: 500;
    line-height: 4.1rem;
  }

  .belowBanner p {
    font-size: 2.7rem;
    padding: 4rem 17rem 4rem 17rem;
  }

  .belowBannerSobre p {
    font-size: 2rem;
    padding: 6rem 17rem 6rem 17rem;
  }

  .cards {
    margin: 3.125rem 11rem 3.125rem 11rem;
  }

  .card {
    padding: 1.25rem 0.688rem 4.25rem 0.688rem;
  }

  .card i {
    font-size: 4.5rem;
  }

  .card-body {
    text-align: center;
  }

  .card-body h3 {
    font-size: 2rem;
  }

  .card-body p {
    font-size: 1.6rem;
  }

  form {
    margin: 1.4rem;
    padding: 0 20rem 0 20rem;
  }

  form h2 {
    padding: 5rem 0 3rem 0;
    font-size: 3.2rem;
  }

  .form-label {
    font-size: 2rem;
  }

  .form-text {
    font-size: 1.4rem;
  }

  .btn {
    --bs-btn-font-size: 1.75rem;
    --bs-btn-color: #0077a3;
    --bs-btn-border-color: #0077a3;
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: #0077a3;
  }

  .caroussel {
    height: 10rem;
  }

  .carousImg {
    height: auto;
    width: 15rem;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-copyright {
    font-size: 1.4rem;
  }

  .footerMgl {
    padding: 1rem 1rem 1rem 1rem;
  }

  .footerMgl {
    display: none;
  }

  .footerMglMid {
    display: block;
    background-color: #004660;
  }

  .textoFooter p {
    margin: 0;
  }

  .logoWhite {
    padding-left: 13%;
  }

  .imgLogoWhite {
    height: auto;
    width: 11.2rem;
  }

  .containerSectionLineFooter {
    margin-right: 0.25rem;
    padding-left: 3.5rem;
  }

  .sectionLineFooter {
    background-color: rgb(255, 255, 255);
    width: 2px;
    height: 4.063rem;
  }

  .contato {
    font-size: 2rem;
  }

  .endereco {
    padding: 0 0 0 0;
    font-size: 1.5rem;
  }
}