@font-face {
  font-family: "cardo";

  src: url("../fonts/Baskervville-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "ysabeau";

  src: url("../fonts/YsabeauOffice-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "seasons";

  src: url("../fonts/Demo_Fonts/Fontspring-DEMO-theseasons-lt.otf")
    format("truetype");
}

@font-face {
  font-family: "bargemo";

  src: url("../fonts/Bargemo-Regular.ttf") format("truetype");
}

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

/* Disable pointer events for desktop */
.mobile-only {
  pointer-events: none;
}

/* Enable pointer events for mobile view */
.mobile-only.clickable {
  pointer-events: auto;
}

/* -----  Body Content  ----- */

/* Main Container */
.main-container {
  position: relative;
}

/* Main Image Container */
.main-image-container {
  position: relative;
  overflow: hidden;
  height: auto;
}

.main-image-container img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; /* Disables all pointer interactions */
  -webkit-user-drag: none; /* Safari */
  user-select: none; /* Prevents selection in other browsers */
}

/* Overlay Content Styling */
.overlay-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(
    to top,
    rgb(4 58 39),
    rgb(4 58 39 / 88%),
    rgb(4 58 39 / 39%),
    rgb(4 58 39 / 17%),
    transparent
  );
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Title and Description Styling */
.title-container {
  font-size: 32px;
  color: #c49a6c;
  width: 50%;
}

.description-container {
  font-size: 14.4px;
  width: 50%;
}

/* Content Styling */
.container-content {
  height: 100vh;
  padding-top: 5rem;
  background-color: #043a27;
}

.content-1 {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 3rem;
}

.content-1 .content-image {
  overflow: hidden;
  height: 20rem;
  width: 29rem;
  border-radius: 20px;
  border: 4px solid wheat; /* Add width, style, and color */
}

.content-image img {
  transform: translate(-70px, 0px);
  width: 34rem;
}

/*-------  Navbar Style  -------- */

.custom-navbar {
  background: linear-gradient(
    to bottom,
    #043a27,
    #043a27c7,
    #043a2773,
    rgb(0 128 0 / 0%)
  );
  background-color: transparent;
}

.container-fluid {
  padding-inline: 3rem;
}

.container-fluid .navbar-toggler {
  border-color: white;
}

.navbar {
  position: absolute;
  z-index: 999;
  width: 100%;
  padding-bottom: 4rem;
}

.navbar-brand,
.nav-link {
  color: #fff !important;
}

/* Navbar logo image */
.navbar-brand {
  padding-block: 0.5rem;
  overflow: hidden;
  margin-top: 0.5rem;
  margin-right: 0rem;
}

.navbar-brand img {
  transform: scale(1.05);
  width: 7rem;
}

/* Height navbar */

.navbar-nav {
  gap: 1rem;
}

.offcanvas-start {
  background-color: #043a27;
  color: #fff;
}

.offcanvas .nav-link {
  color: #fff;
  font-size: 1.2rem;
}

.offcanvas .nav-link:hover {
  color: #ddd;
}

/*------  Dropdown Style  -------- */

.nav-dropdown {
  display: flex;
  align-items: center;
  color: white;
}

.dropdown-toggle::after {
  content: none;
}

.dropdown-menu {
  margin-top: 1.2rem !important;
  background-color: #043a27;
  border-color: #c49a6c;
}

.dropdown-menu .dropdown-item {
  color: white;
  padding-block: 0.7rem;
}

/* Media Querry */
@media (max-width: 768px) {
  /* Navbar */
  .navbar-brand {
    padding-block: 0rem;
    overflow: hidden;
    margin-top: 0.5rem;
    margin-right: 0rem;
    margin-left: 3rem;
  }

  .container-fluid {
    padding-inline: 0rem;
  }

  .container-fluid .navbar-toggler {
    margin-right: 3rem;
  }

  .custom-navbar .navbar-collapse {
    background: linear-gradient(
      to top,
      #043a27,
      #043a27c7,
      #043a27ba,
      rgb(0 128 0 / 0%)
    ); /* Green to transparent gradient */
    background-color: transparent; /* Ensures background on older browsers */
    padding-inline: 3rem;
  }

  .navbar-brand img {
    transform: scale(1.05);
    width: 7rem;
  }

  .dropdown {
    width: 100%;
    padding-top: 0.5rem !important;
    padding-bottom: 1.45rem !important;
  }

  .dropdown-menu {
    margin-top: 1.15rem !important;
    background-color: #043a27;
    border-color: #c49a6c;
  }

  .dropdown-menu .dropdown-item {
    color: white;
    padding-block: 0.7rem;
  }

  /* Main Image Container */
  .main-image-container {
    overflow: hidden;
  }

  .main-image-container img {
    width: 120vw;
    transform: translate(-85px, 0px);
  }

  .title-container {
    font-size: 25px;
  }

  .description-container {
    font-size: 11.4px;
    width: 80%;
  }

  .overlay-content {
    gap: 0rem;
  }
}

@media (min-width: 1000px) {
  .container-fluid {
    padding-inline: 4rem;
  }
}

@media (min-width: 1200px) {
  .navbar-nav {
    gap: 5rem;
  }
  .main-image-container {
    height: 100vh;
  }
}