:root {
  --primary: #5591c5;
  --secondary: #f6b800;
  --tertiary: #4d0011;
}

@media (max-width: 576px) {
  .navbar .container-full {
    min-height: 100vh;
    margin-top: 0;
    text-align: center;
    align-items: unset !important;
    font-size: 1.3rem;
  }
}

.navbar .nav-link.active {
  color: var(--primary);
  font-weight: bolder;
}
.navbar .nav-link:hover:not(.active) {
  text-decoration: underline 2px solid var(--primary);
  text-underline-offset: 3px;
}

/* .heading {
  color: #5591c5;
  font-family: "PT Serif", serif;
  line-height: 1.3;
} */

header {
  position: relative;
  height: 85vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  /* bottom: 0; */
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.4;
  z-index: 1;
}

.service-tiles li a {
  color: #fff;
}

.service-tiles li.active {
  color: #fff;
}
.service-tiles li.active i {
  border-color: #fff !important;
}

.enquiryLinks a:hover {
  opacity: 0.7;
  cursor: pointer;
}

/* gallery */
@media (min-width: 768px) {
  #gallery {
    background-color: unset !important;
  }
}

/*contact form*/

.contact-info {
  max-width: 80%;
  margin: 0 auto;
}
.column-form .contact-info a {
  text-decoration: none;
  display: block;
  margin-bottom: 1rem;
  color: #fff;
}
.column-form .contact-info a span {
  font-weight: var(--bs-body-font-weight);
  color: #fff;
}
.column-form .contact-info a i {
  margin-right: 0.5rem;
}

.contact-slogan,
.points-of-contact,
.column-form-socials span {
  display: block;
  font-weight: 600;
}
/* .column-form-socials span{
    margin-top: 1.5rem;
    font-size: 1.7rem;
}
.column-form-socials a{
    display: inline-block;
}
.column-form-socials a i{
    font-size: 3rem;
    color: black;
    padding: .5rem .5rem 0 0;
} */

.column-form form {
  background-color: #e8a813;
  padding: 48px 1.7rem;
  text-align: center;
  border-radius: 5px;
}

.form-header {
  display: block;
  font-size: 1.5rem;
  text-align: center;
  color: #fff;
  font-weight: 600;
  margin-bottom: 1rem;
}

.column-form form input,
.column-form form select,
.column-form form textarea {
  padding: 0.5rem;
  border: 2px solid #fff;
  color: rgba(0, 0, 0, 0.9);
  font-weight: 500;
  margin-bottom: 0.5rem;
  width: 100%;
  border-radius: 5px;
}
#fname {
  margin-right: 0.5rem;
}
.column-form form input::placeholder,
textarea::placeholder {
  color: rgba(0, 0, 0, 0.531);
  font-weight: 500;
}

.column-form form option {
  background-color: rgba(37, 37, 37, 0.774);
  color: #fff;
  padding: 1rem;
}

.column-form form input:focus,
.column-form form textarea:focus {
  outline: #000 2px solid;
  outline-offset: -3px;
}

.column-form form select:focus {
  outline: none;
}

.form-submit {
  text-align: center;
  font-weight: 600;
  text-transform: capitalize;
  background-color: #000;
  color: white;
  border: none;
  font-size: 1.3rem;
  padding: 0.3rem;
  margin: 0.3rem auto;
  width: 60%;
  transition: ease 0.45s;
  border-radius: 5px;
  text-underline-offset: 3px;
}
.form-submit:hover {
  text-decoration: underline #e8a813;
}
.form-submit:active {
  color: #d89d15;
  text-decoration: none;
  /*background-color: white;
    outline: 2px solid #e8a813;*/
}

@media screen and (max-width: 820px) {
  .column-form {
    max-width: 100%;
  }
}
@media screen and (max-width: 576px) {
  .column-form form {
    border-radius: 0;
  }
  .column-form {
    padding-left: 0;
    padding-right: 0;
    flex-direction: column;
  }
  .form-col1 {
    max-width: 100%;
    text-align: center;
  }
  .form-col2 {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* footer */
footer {
  font-size: 0.8rem;
  background-color: #000;
}

#tcg {
  text-decoration: none;
}

#tcg:hover {
  text-decoration: underline 1px solid;
  text-underline-offset: 3px;
}