@import url("https://fonts.googleapis.com/css2?family=Forum&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

@font-face{
  font-family: trajan_font;
  src:url(../assets/fonts/trajan_font.ttf);
}

* {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.nav-container {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

#img-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* #img-container img{
    width: 100vw;a
    height: 100vh;
    position: relative;
} */

#img-element {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: background-image 3s ease-in-out;
  /* Set a default background image */
  /* background-image: url("../assets/images/Homepage/vik-web-home-asset-01.png"); */
}

#img-element .image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: 3s ease-in-out;
}

#img-element .image.active{
  opacity: 1 !important;
  z-index: 1;
  transition: 3s ease-in-out;
}

.navbar {
  position: absolute;
  width: 95vw;
  z-index: 1;
  top: 3.1rem;
  padding-top: 40px;
  padding-bottom: 40px;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.nav-pair {
  display: flex;
  gap: 40px;
}

.navbar-links {
  font-family: "Inter", sans-serif;
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
  justify-items: center;
}

.navbar-links a {
  text-decoration: none;
  color: white;
  font-weight: 300;
  padding-left: 4px;
  padding-right: 4px;
  letter-spacing: 2px;
  font-size: small;
}

.navbar-links a:hover {
  text-shadow: 0 0 .55px #fff, 0 0 .55px #fff;
}

.heading {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.heading-main{
  color: white;
  font-family: trajan_font;
  letter-spacing: 6px;
  font-size: large;
}  

.contact, .contact a {
  font-family: "Inter", sans-serif;
  color: white !important;
  text-decoration: none !important;
  margin-top: 10px;
  font-size: small;
}

.logo-img {
  width: 50px;
}

#active {
  font-weight: 400;
}

.mobile-menu {
  display: none;
}

/* PC SCREEN */
@media (min-width: 1024px) {
  /* .hamburger-menu{
        display: none;
    } */

  .contact, .contact a {
    font-family: "Inter", sans-serif;
    color: white !important;
    font-size: larger;
    text-decoration: none !important;
  }
}

/* TABLET SCREEN */
@media (min-width: 768px) and (max-width: 1024px) {
  .hamburger-menu {
    display: none;
  }

  .mobile-nav-links {
    display: none;
  }

  .contact, .contact a {
    font-family: "Inter", sans-serif;
    color: white !important;
    font-size: medium;
    text-decoration: none !important;
  }
}

.mobile-logo{
  display: none;
}

/* MOBILE SCREEN */
@media (min-width: 0px) and (max-width: 1024px) {
  .navbar-links {
    display: none;
  }

  .mobile-logo{
    display: block;
    margin-top: 85px;
  }

  .mobile-logo img{
    width: 50px !important;
  }

  .mob-menu{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .heading {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    justify-self: center;
    align-items: center;
    justify-content: center;
  }

  .heading-main {
    color: white;
    font-family: "Times New Roman", Times, serif;
    letter-spacing: 3px;
    font-size: small;
  }

  .hamburger-menu {
    display: block;
    text-align: center;
    margin-top: 20px;
    /* margin-left: 45%; */
    cursor: pointer;
    z-index: 100;
  }

  .menu {
    width: 40px;
    margin-bottom: 6px;
    height: 1px;
    background-color: white;
  }

  a {
    text-decoration: none;
  }

  /* Initially hide the mobile menu */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0; /* Start transparent */
    z-index: 1000; /* Place it above other content */
    overflow-x: hidden;
    /* Add a smooth transition effect */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transform-origin: center; /* Set the transform origin to the center */
    /* transform: scaleX(0); */
    pointer-events: none;
    transition: .3s ease-in;
  }

  /* When the 'active' class is added, expand the mobile menu to cover the screen */
  .mobile-menu.active {
    /* width: 100%; */
    opacity: 1; /* Make it fully visible */
    /* transform: scaleX(1); */
    pointer-events: all;
  }

  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .mobile-nav-links a {
    color: black;
    font-family: "Inter", sans-serif;
    font-size: small;
    letter-spacing: 2px;
  }

  .mobile-nav-contents {
    display: flex;
    text-align: center;
    flex-direction: column;
  }

  .mobile-nav-heading h1 {
    letter-spacing: 2px;
    font-size: large;
  }

  .mobile-nav-heading p {
    font-family: "Inter", sans-serif;
    margin-top: 6px;
    margin-bottom: 10px;
    color: black;
    font-family: "Inter", sans-serif;
    font-size: small;
    letter-spacing: 2px;
  }

  .mobile-nav-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* text-align: center; */
    justify-items: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    top: 3.5rem;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
  }

  .black-hamburger-menu {
    display: block;
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .insideMenu {
    width: 40px;
    margin-bottom: 6px;
    height: 1px;
    background-color: black;
  }
}