@import url(https://fonts.googleapis.com/css2?family=Open+Sans&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap);

/**
 * START.
 * DOM element syles.
 */
html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: rgb(255, 255, 255);
  cursor: default;
  height: 100%;
  color: #101010;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* FONT COLORS, HEIGHT */
.font-white {
  color: #fff;
}

.font-grey {
  color: #707070;
}

.font-black {
  color: #1d1d1d;
}

.line-spacing {
  line-height: 2;
}

a {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
}

a:hover {
  color: #000000;
  text-decoration: none;
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border: 1px solid #a9a9a9;
}

.required {
  border: 2px solid red;
}

.hideOnWeb {
  display: none;
}

h1 {
  font-size: 3.75em;
  font-family: 'Helvetica', sans-serif;
  font-weight: 500;
}

h2 {
  font-size: 2.8125em;
  font-family: 'Helvetica', sans-serif;
  font-weight: 500;
}

h3 {
  font-size: 1.875em;
  font-family: 'Helvetica', sans-serif;
  font-weight: 600 !important;
}

h4 {
  font-size: 1.5625em;
  font-family: 'Helvetica', sans-serif;
  font-weight: 600;
}

h5 {
  font-size: 1.1875em;
  font-family: 'Helvetica', sans-serif;
  font-weight: 500;
}

p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.15em;
  font-weight: 300 !important;
}

.space-top-bottom {
  margin-top: 100px;
  margin-bottom: 100px;
}

.btn-info {
  background-color: #036de4;
  border-color: #036de4;
}

.btn-info:hover {
  background-color: #004da5;
  border-color: #004da5;
}

hr {
  display: block;
  border: 0;
  border-top: 5px solid #ed2c32;
  margin: 1em 0;
  padding: 0;
  width: 15%;
  margin: auto;
  border-radius: 3px;
}

.nofade-header {
  border-top: 1px solid #dbdbdb;
}

.modal-head {
  border-bottom: 1px solid #e5e5e5;
}

.btn {
  border-radius: 50px;
}

/* owl-carousel */
.owl-prev,
.owl-next {
  position: absolute;
  top: 40%;
  transform: translateY(-40%);
}

.owl-prev {
  left: -5rem;
  height: 47px;
  width: 26px;
}

.owl-next {
  right: -5rem;
  height: 47px;
  width: 26px;
}
.owl-next span,
.owl-prev span {
  font-size: 60px;
}

/* INTRODUCTION */
.introduction-bg {
  width: 100%;
  /* margin-top: 13.125rem; */
  height: 490px;
  /* background-size: cover; */
  /* background-position: center; */
  /* background-attachment: fixed; */
  background-repeat: no-repeat;
  background-image: url(../media/images/home/bg-1.png);
}

.about-bg {
  width: auto;
  /* margin-top: 13.125rem; */
  height: 490px;
  /* background-size: cover; */
  /* background-position: center; */
  /* background-attachment: fixed; */
  background-repeat: no-repeat;
  background-image: url(../media/images/about/banner-about.png);
}

.contact-bg {
  width: auto;
  height: 490px;
  background-repeat: no-repeat;
  background-image: url(../media/images/contact/contactbanner.png);
}

.equipment-bg {
  width: auto;
  /* margin-top: 13.125rem; */
  height: 490px;
  /* background-size: cover; */
  /* background-position: center; */
  /* background-attachment: fixed; */
  background-repeat: no-repeat;
  background-image: url(../media/images/equipment/equip-banner.png);
}

.project-bg {
  width: auto;
  height: 490px;
  background-repeat: no-repeat;
  background-image: url(../media/images/projects/Group\ 114.png);
}

.glassmorp-1 {
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(192, 192, 192, 0.3);
  border-radius: 3.125rem !important;
  /* padding-top: 30px;
  padding-bottom: 30px; */
  padding: 30px 60px 30px 190px;
  margin-left: -50px;
  width: 825px;
}

.glassmorp-2 {
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(192, 192, 192, 0.3);
  border-radius: 3.125rem !important;
  /* padding-top: 30px;
  padding-bottom: 30px; */
  padding: 20px 70px;
  float: right;
  margin-right: 50px;
  width: 625px;
  margin-bottom: -100px !important;
  margin-top: 100px !important;
}

.glassmorp-center {
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(192, 192, 192, 0.3);
  border-radius: 3.125rem !important;
  padding: 20px 40px;
  margin-top: 20vw;
}

.glassmorp-contact {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3.125rem !important;
  /* padding-top: 30px;
  padding-bottom: 30px; */
  padding: 20px 50px;
  /* width: 625px; */
  margin-bottom: -100px !important;
  margin-top: 100px !important;
  margin: auto;
}

.glassmorp-slideshow {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgb(255, 255, 255, 0.3);
  padding: 30px 30px;
  margin-top: -95px;
  margin-bottom: 50px;

  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.vertical-dotted {
  border-left: 10px dotted #036de4;
  padding: 30px 50px;
  margin-top: 30px;
}

.removed-vertical-dotted {
  /* border-left: 10px dotted #036DE4; */
  padding: 30px 50px;
  margin-top: 30px;
}

.vision-mission-img {
  height: 330px;
  width: auto;
}

.hide-mission-v1 {
  display: block;
}

.hide-mission-v2 {
  display: none;
}
.about-img {
  height: 330px;
  width: auto;
}

.map-contact {
  height: auto;
  width: 500px;
  border-radius: 10px;
}

@media screen and (max-width: 1199px) {
  .vision-mission-img {
    height: 300px;
    width: auto;
  }

  .about-img {
    height: 280px;
    width: auto;
  }
}

@media screen and (max-width: 991px) {
  .vision-mission-img {
    height: 250px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .about-img {
    height: 280px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .hide-mission-v1 {
    display: none;
  }

  .hide-mission-v2 {
    display: block;
  }

  .home-page-title {
    font-size: 50px !important;
  }

  .home-paragraph {
    font-size: 20px;
  }

  .space-contact-us {
    margin-top: 150px;
  }
}

@media screen and (max-width: 493px) {
  .home-page-title {
    font-size: 50px !important;
  }
  .home-paragraph {
    font-size: 20px;
  }
  .vision-mission-img {
    height: 225px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 546px) {
  .map-contact {
    height: 60vw;
    width: auto;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}
/* FAQ */
.btn-link,
.btn-link:focus {
  color: #1d1d11 !important;
  font-size: 20px;
}

.btn-link:hover {
  color: #7d7d7d !important;
}

.mb-0 {
  border-bottom: 1px solid rgb(177, 177, 177);
}

.modal-xl {
  margin-top: 100px;
  width: 980px;
  margin: auto;
}

.modal-header,
.modal-footer {
  border-bottom: 0px solid #e5e5e5;
  border-top: 0px solid #e5e5e5;
}

.close {
  opacity: 1;
  font-size: 30px;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
}

.dot {
  position: absolute;
  top: 115px;
  right: 200px;
  height: 180px;
  width: 180px;
  background-color: #dcccad;
  color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding-top: 40px;
}

.dot-num {
  height: 50px;
  width: 50px;
  background-color: #ede2cd;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding-top: 8px;
}

/** END. **/

/* spacing */
/* core-value-spacing */
@media only screen and (min-width: 481px) {
  /* .space-top-bottom {
    padding-top: 30px;
    padding-bottom: 30px;
  } */
}

/**
 * START.
 * Navbar elements style.
 */
.navbar {
  height: 125px;
  width: 100%;
  border-radius: 0px;
  /* position: absolute !important; */
  /*font-family: "Glacial Indifference", sans-serif;*/
  font-family: 'Open Sans', sans-serif;
  border-bottom: 1px solid #bfbfbf !important;
}

.navbar-home {
  background: #fdfdfd;
}

.navbar-fiber {
  background: url(../media/images/fiber-navbar.png);
  background-size: 300px 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-position: center;
}

.navbar-brand {
  padding: 0;
  margin-top: 0;
}

.navbar-brand img {
  width: 620px;
  /* width: 43vw; */
  padding: 2px;
}

.navbar .navbar-nav li a {
  color: #101010;
}

.navbar .navbar-nav .active a,
.navbar .navbar-nav .active a:hover,
.navbar .navbar-nav .active a:focus,
.navbar .navbar-nav .active a:active,
.navbar .navbar-nav li a:hover,
.navbar .navbar-nav li a:focus,
.navbar .navbar-nav li a:active {
  color: #555555;
}

.navbar-right {
  float: none;
  margin: 0 auto;
  display: inline-block;
  font-size: 18px;
  padding-top: 3px;
}
/** END. **/

/* map api */
#mapid {
  height: 180px;
}

/**
 * START.
 * About us page DOM styles.
 */

.content-title {
  font-size: 22px;
  font-family: 'Oswald', sans-serif;
  color: #54a7ed;
}

.about-feature {
  border-top: 1px solid #999;
  padding: 50px 0;
  margin: 0 50px;
}

.about-feature:first-child {
  border: none;
}

.about-feature p {
  font-size: 18px;
  color: #999;
  line-height: 30px;
}

#features {
  background-color: #fff;
}

#about {
  background-image: url('../media/images/about.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  overflow: hidden;
  padding-top: 70px;
  height: 43%;
}

/** END. **/

/* payment-platforms */
.payment-icon {
  width: auto;
  height: 100px;
}

.gcash-img {
  height: 300px;
  width: auto;
  margin-bottom: 10px;
}
/**
 * START.
 * Contact us page DOM styles.
 */

.contact-header-bg {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center;
}

.contact-header-bg-modal {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center;
}

.contact-form {
  margin-top: 325px;
  background-color: rgba(236, 225, 192, 0.55);
  backdrop-filter: blur(5px);
  border-radius: 30px;
  padding: 38px 50px 38px 50px;
  z-index: 999;
}

#tyModal {
  z-index: 9999999;
}

.formLabel {
  font-family: 'Poppins';
  font-size: 16px;
  color: #ccc;
}

.inputField {
  width: 100% !important;
  height: 50px !important;
  border-radius: 25px;
  background-color: #ffffff;
  border: 0px;
}

.btn-default {
  color: #ffffff;
  background-color: #00a5cb;
  border-color: #00a5cb;
  width: 150px;
}
.btn-default:focus,
.btn-default:active,
.btn-default:hover {
  color: #ffffff;
  background-color: #1188a3;
  border-color: #1188a3;
  width: 150px;
}

.btn-blue {
  color: #ffffff;
  background-color: #032d5f;
  border-color: #032d5f;
}
.btn-blue:focus,
.btn-blue:active,
.btn-blue:hover {
  color: #ffffff;
  background-color: #072446;
  border-color: #072446;
}

#bgMap {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

#contactForm {
  padding-top: 75px;
  position: relative;
  z-index: 1;
}

#contactForm .panel {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 5px #333;
}

#contactForm address {
  line-height: 30px;
}

#contactForm i {
  color: #95a5a6;
}
/** END. **/

/**
 * START.
 * Footer styles.
 */
footer {
  background-color: #967e44;
  color: #1d1d1d;
}

/** END. **/

.mobile-navbar {
  display: none;
}

footer .footer-links {
  padding-left: 60px;
}

footer .social-media-cont {
  margin-top: 30px;
  padding-right: 20px;
}

footer .hatchit-links {
  margin-top: 110px;
}

footer .hatchit-logo {
  float: right;
}

.review-cont {
  position: absolute;
  bottom: 120px;
  width: 100%;
  padding-left: 15%;
  padding-right: 10%;
}

.review {
  background: rgba(78, 102, 173, 0.7);
  text-align: center;
  color: white;
  padding: 20px;
  height: 90px;
}

.navbar .header-menu-logo {
  height: 70px;
  width: auto;
}

.header-menu-title {
  font-size: 32px;
  letter-spacing: 2px;
  color: #e7c836;
}

.booking-check-availability {
  padding: 15px;
  margin-right: 0px;
}

.booking-info,
.contact-info {
  padding: 30px;
}

.available-rooms {
  padding: 30px;
}

.contact-location {
  padding: 30px;
  color: #ffffff;
}

@media only screen and (max-width: 975px) {
  .hide-for-mobile {
    display: none !important;
  }

  .show-for-mobile {
    display: block !important;
  }

  .modal-xl {
    width: 90vw;
  }

  .social-media-links {
    border: 1px solid red;
  }

  .container .navbar-header {
    margin-left: 0px;
  }

  #homeCarousel .item .property-info {
    width: 90%;
    /*bottom: 10px;*/
  }

  #homeCarousel .item .property-info .property-label {
    margin: 0px;
  }

  section.property-links {
    padding-top: 0px;
    margin-top: 0px;
  }

  section.property-links .row > div:not(:first-child) {
    margin-top: 25px;
  }

  .homeDiv .quickLinks {
    margin-bottom: 15px;
  }

  footer.container-fluid .footer-logo {
    padding: 0px 10px !important;
  }

  footer.container-fluid .footer-logo img {
    height: 150px !important;
    margin: 0 auto;
  }

  footer.container-fluid .contactus {
    padding: 0px 10px !important;
  }

  footer.container-fluid .contacts {
    padding: 0px !important;
    font-size: 20px !important;
  }

  .mobile-navbar {
    width: 2em;
    position: absolute;
    right: 5px;
    top: 10px;
  }

  .mobile-navbar span {
    font-size: 2em;
    color: #efcf92;
  }

  .container #navBar {
    /* margin-top: 40px !important; */
    width: 100%;
    text-align: center;
    border: none !important;
    box-shadow: none;
  }

  #searchResultsContainer .propertyDiv {
    height: auto;
  }

  #searchResultsContainer .propertyDiv .propertyImg {
    height: 300px;
  }

  #carousel-example-generic .carousel-inner .item img {
    height: 210px;
  }

  #carousel-example-generic .carousel-indicators {
    top: 185px !important;
  }

  #carousel-example-generic ul.thumbnails-carousel li {
    width: 30% !important;
  }

  #carousel-example-generic .thumbnails-carousel li img {
    width: 100% !important;
  }

  #carousel-example-generic .carousel-control span {
    top: 25% !important;
  }

  .profile-carousel {
    padding-top: 0px !important;
  }

  #contactusForm .form-group.contact-in-col {
    margin-right: 20px;
  }

  .mortgage-calc-header {
    width: 100%;
  }

  .mobile-footer {
    padding: 0px !important;
  }

  .navbar .header-contacts {
    padding-left: 25px;
    font-size: 12px;
  }

  .navbar .header-contacts br {
    display: block;
  }

  .aboutMissionImg {
    height: auto !important;
  }
}

@media only screen and (max-width: 823px) {
  .nav-mobile {
    padding-top: 15px;
    font-size: 25px;
  }

  .showOnMobile {
    display: block;
  }
  .hideOnMobile {
    display: none;
  }
  .sidepanel {
    /* height: 200px; */
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #e4e4e4;
    overflow-x: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: 0.5s;
    border-radius: 10px;
    opacity: 0.8;
  }
  #companyDesc div {
    padding: 30px 20px 10px 20px !important;
  }

  .divBrownMobile .row .homeAmenities {
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 769px) {
  .container .mobile-navbar {
    display: block;
  }
}

@media only screen and (max-width: 767px) {
  .div-mobile {
    margin-left: 40px;
    margin-right: 40px;
  }
}

@media only screen and (max-width: 975px) {
  .our-img-mobile {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 330px;
  }

  /* FAQ */
  .btn-link,
  .btn-link:focus {
    color: #fff;
    /* font-size: 2.5vw; */
    white-space: normal;
    text-align: left;
  }
}

@media only screen and (max-width: 1199px) {
  .navbar-brand img {
    width: 450px;
    padding-top: 10px;
  }
}

@media only screen and (max-width: 991px) {
  .navbar-brand img {
    width: 340px;
    padding-top: 10px;
  }
}

@media only screen and (max-width: 671px) {
  .navbar-brand img {
    width: 80vw;
    padding-top: 10px;
  }
}

@media only screen and (max-width: 530px) {
  .our-img-mobile {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30vh;
  }
}

@media only screen and (max-width: 480px) {
  /* @media only screen and (max-width: 640px) { */
  /* @media only screen and (max-width: 850px) { */

  body {
    background-color: #fff;
  }

  .navbar {
    height: 18vw;
    width: 100%;
    border-radius: 0px;
    /* position: absolute !important; */
    /*font-family: "Glacial Indifference", sans-serif;*/
    font-family: 'Open Sans', sans-serif;
    border-bottom: 1px solid #bfbfbf !important;
  }

  .navbar-brand img {
    width: 80vw;
    padding-top: 10px;
  }

  .our-img-mobile {
    width: 92vw;
    height: auto;
    /* object-fit: cover; */
  }

  /* #homeCarousel {
    width: 100%;
    height: 50%;
  } */

  .div-mobile {
    overflow: auto;
    height: auto;
    width: auto;
    margin: 10px;
    /* padding-left: 20px;
    padding-right: 20px; */
  }

  .ph-map {
    width: 80vw !important;
  }

  .image-mobile,
  .mini-pic {
    height: 100%;
    width: 100%;
  }

  .room-img {
    height: 90% !important;
    width: 320px !important;
  }

  .modal-xs {
    width: 97% !important;
    overflow: auto !important;
  }

  .carousel-div {
    height: 130px !important;
    width: auto !important;
  }

  /* #homeCarousel .carousel-inner,
  #homeCarousel .carousel-inner .item {
    height: 300px !important;
  } */

  #map {
    width: 95% !important;
  }

  .mobile-form {
    margin-top: 10px !important;
    padding: 20px 10px 20px 10px;
    z-index: 1 !important;
    padding-bottom: 55px;
  }

  .mobile-toDown {
    margin-top: 515px !important;
    /* padding-top: 515px; */
    overflow: auto;
  }

  .container .mobile-navbar {
    display: block;
  }

  .homeDiv-title {
    top: 150px;
  }

  .social-media .fa-stack {
    font-size: 2.5em;
  }

  /* footer {
    background-color: #202020 !important;
  } */

  footer .footer-links {
    padding-left: 0px;
  }

  footer .social-media-cont {
    padding-right: 0px;
    position: relative;
    margin: 0 auto;
  }

  footer .hatchit-links {
    margin-top: 60px;
  }

  footer .hatchit-links-cont {
    padding-right: 0px !important;
    text-align: center;
  }

  footer .hatchit-logo {
    float: none;
  }

  .link-a:hover {
    text-decoration: underline !important;
  }

  .review-cont {
    bottom: 60px !important;
  }

  .review {
    padding: 10px !important;
    height: auto !important;
  }

  .review-comments {
    font-size: 15px !important;
  }

  .navbar .navbar-brand .header-menu-logo {
    height: 80px !important;
  }

  .header-menu-title {
    font-size: 20px;
  }

  .navbar-brand img {
    padding: 5px 0;
  }

  .mobile-nav {
    position: relative;
    margin: 0;
    width: 100%;
    height: fit-content;
  }

  .mobile-logo {
    height: 120px;
  }

  .mobile-main {
    margin: 0;
    background-size: 110%;
    background-repeat: no-repeat;
    height: min-content;
  }

  .social-media-links {
    position: relative;
    bottom: 0px;
  }
} /* end of @media*/

@media only screen and (max-width: 400px) {
  .padding-modal {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media only screen and (max-width: 375px) {
  .navbar-brand img {
    width: 300px;
    padding-top: 10px;
  }

  .navbar {
    height: 20vw;
    width: 100%;
    border-radius: 0px;
    /* position: absolute !important; */
    /*font-family: "Glacial Indifference", sans-serif;*/
    font-family: 'Open Sans', sans-serif;
    border-bottom: 1px solid #bfbfbf !important;
  }

  .btn-link,
  .btn-link:focus {
    color: #fff;
    font-size: 18px;
  }
}

@media only screen and (max-width: 320px) {
  .navbar-brand img {
    width: 250px;
    padding-top: 10px;
  }

  .navbar {
    height: 66px;
    width: 100%;
    border-radius: 0px;
    /* position: absolute !important; */
    /*font-family: "Glacial Indifference", sans-serif;*/
    font-family: 'Open Sans', sans-serif;
    border-bottom: 1px solid #bfbfbf !important;
  }
}

.aboutHeader {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 350px;
  background-image: url('../media/images/about_header.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
​ .pageContainer {
  width: 100px;
  height: 100px;
  position: relative;
}

.img-crop {
  object-fit: cover;
  /* object-position: -20% 0; */

  width: 250px;
  height: 200px;
}