:root {
  --main-white-color: white;
  --main-black-color: black;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: normal;
  font-size: 100%;
  font-family: inherit;
  /* border: 1px solid red; */
}

/* Ensure body and html take full viewport */
html,
body {
  width: 100%;
  height: 100%;
}
.static {
  position: static;
}

.cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.owl-carousel .owl-slide {
  position: relative;
  height: 500px;
  background-color: lightgray;
}

.owl-carousel .owl-slide-animated {
  transform: translateX(20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.05s;
}

.owl-carousel .owl-slide-animated.is-transitioned {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: all 0.5s;
}

.owl-carousel .owl-slide-title.is-transitioned {
  transition-delay: 0.2s;
}

.owl-carousel .owl-slide-subtitle.is-transitioned {
  transition-delay: 0.35s;
}

.owl-carousel .owl-slide-cta.is-transitioned {
  transition-delay: 0.5s;
}

.owl-carousel .owl-dots {
  position: absolute;
}

.owl-carousel .owl-nav {
  display: none;
}

.owl-carousel .owl-dots .owl-dot [class*="owl-"]:focus {
  outline: none;
}

.owl-carousel .owl-dots .owl-dot span {
  background: transparent;
  border: 1px solid #fff;
  transition: all 0.2s ease;
}

.owl-carousel .owl-dots .owl-dot:hover span,
.owl-carousel .owl-dots .owl-dot.active span {
  background: #39f5cf;
}

section {
  display: none;
}

body {
  /* font-family: "Roboto+Condensed", sans-serif; */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#logo-img {
  width: 25px;
  height: 25px;
  margin-right: 5px;
  margin-bottom: 7px;
}

a:link {
  text-decoration: none;
}

.nav-style {
  color: #14977d;
  display: block;
  padding: 0.5rem 1rem;
  font-weight: 700;
}

.nav-style:hover {
  border: 1px solid #0b5345;
}

li a {
  color: #aaa;
}

a:hover {
  color: #0b5345;
}

#logo {
  color: #12836c;
  font-weight: bolder;
  font-size: larger;
}
.white {
  color: #fff;
}

#link-a {
  background-color: #f83570;
  padding: 15px 32px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 20px;
  border-radius: 150px;
}

.py-t {
  padding-top: 1.2rem;
}

#link-a:hover {
  background-color: #fff;
  text-decoration: none;
  padding: 15px 32px;
  color: #333;
}

#hr-top {
  padding: 0;
  margin: 0;
  background-color: seagreen;
  height: 4px;
  line-height: 0;
}

#active {
  font-weight: bold;
  color: #ee8c1b;
}

.list-b {
  padding-bottom: 20px;
}

#home-hero {
  max-width: 100%;
  background-image: url("../img/main-bg.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  height: 500px;
}

.mask {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  background: rgba(23, 39, 7, 0.6);
}

pad-mar {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.toast {
  left: 50%;
  transform: translate(-50%, 0px);
  z-index: 9999;
}

.toast-header {
  background-color: #fc5a5a;
  color: #fff;
  width: 350px;
}

.toast {
  /* max-width: 350px; */
}

.toast-header button {
  color: #fff;
}

.toast-body {
  background-color: #fff;
  color: #333;
}

.header-msg {
  text-align: center;
  color: #fff;
}

#about-bg {
  background-image: url("../img/main-bg1.jpg");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

#program-bg {
  background-image: url("../img/program.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#registration-bg {
  background-image: url("../img/register.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#procedure-bg {
  background-image: url("../img/procedure.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#contact-bg {
  background-image: url("../img/contact.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.others-hero {
  max-width: 100%;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 200px;
}

#hero-right {
  max-width: 100%;
  background-color: lightgreen;
  background-size: 100%;
  background-position: inherit;
  background-repeat: no-repeat;
  height: 500px;
}

.home-header {
  padding-top: 2.5rem;
}

#orders-h2 {
  font-weight: bold;
  color: #fff;
  padding-top: 50px;
}

#welcomeArea {
  margin-top: 4rem;
  max-width: 100%;
  background-color: #0b5345;
  background-size: 100%;
  color: #eee;
  padding-bottom: 5rem;
  /* height: 300px; */
}

footer {
  background-color: rgb(2, 3, 2);
}

.footer-base {
  color: #aaa;
  font-size: 15px;
}

#link-primary {
  color: #0b5345;
}

.link-primary {
  color: #0b5345;
}

#dev-link {
  color: #14977d;
  font-style: italic;
}

ul {
  list-style-type: none;
  /* margin: 0; */
  padding: 0;
}

.reg-form {
  font-weight: bold;
  padding-top: 1.5rem;
}

.btn-submit {
  background-color: #0b5345;
  color: #fff;
  border: none;
  padding: 15px 32px;
  font-size: 18px;
}

/* ---------------------
From photo start
--------------------- */
.items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}

.item {
  position: relative;
  background: #05aa89;
  overflow: hidden;
}
.item::after {
  content: "";
  position: absolute;
  display: block;
  background: inherit;
  opacity: 0.9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(2) translateX(-75%) translateY(-75%) rotate(-28deg);
  transition: transform 3s cubic-bezier(0.2, 1, 0.3, 1);
}
.item:hover:after {
  transform: scale(2) translateX(0) translateY(0) rotate(-28deg);
}
.item:hover .item-image {
  transform: scale(1.2);
}
.item:hover .item-text {
  opacity: 1;
  transform: translateY(0);
}
.item-image {
  height: auto;
  transform: translateZ(0);
  display: block;
  transition: transform 750ms cubic-bezier(0.2, 1, 0.3, 1);
}
.item-image:before {
  content: "";
  display: block;
  padding-top: 75%;
  overflow: hidden;
}
.item-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  line-height: 0;
}
.item-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  text-align: center;
  z-index: 1;
  color: #fff;
  transform: translateY(-20%);
  transition: opacity 500ms cubic-bezier(0.2, 1, 0.3, 1),
    transform 500ms cubic-bezier(0.2, 1, 0.3, 1);
  transition-delay: 300ms;
}
.item-text-wrap {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.item-text-title {
  font-size: 2rem;
  padding: 0 1rem;
  margin: 5px 0 0 0;
}
.item-text-category {
  text-transform: uppercase;
  font-size: 1.2rem;
  opacity: 0.7;
  margin: 0;
}

/* ---------------------
From photo end
--------------------- */
.gallery-item {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.gallery-item .overlay i {
  color: #fff;
  font-size: 2rem;
}