@font-face {
    font-family: Canopee;
    src: url(./Fonts/616fd1dd00cf6c70f978fc69_Canopee.woff2);
}
@font-face {
    font-family: EditorialNew;
    src: url('./Fonts/5f242a694256f02b944d5767_EditorialNew-Light.woff2');
}
@font-face {
    font-family: 'Georgia1';  
    src: url('./Fonts/georgia.woff');
    }
    @font-face {
        font-family: 'Georgia2';  
        src: url('./Fonts/georgiab.woff');
        }
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    cursor: none
  }
  
  ::-webkit-scrollbar {
      width: 12px; 
      height:12px; 
  }
  ::-webkit-scrollbar-track {
    background-image: url(./Assets/bg.jpg);
      /* background-color: rgba(208, 198, 188, 0.778); */
      background-color: #b5aea7b7;
     background-blend-mode: darken;
  
  }
  ::-webkit-scrollbar-thumb {
      background-color: #141412;
      border-radius: 10px;
      border: 3px solid #cdc6be;
  }
  
  html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
  }
  a{
      text-decoration: none;
      color: #cdc6be;
  }
  
  
  .hero-img{
  margin-top: 4em;
  width: 100%;
  height: 100%;
  border: 2px solid #141412;
  }
  
  img{
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  nav{
      border-bottom: 2px solid #14141252;
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:1.5em 2em;
      color: #141412;
      background-image: url(./Assets/bg.jpg);
      /* background-color: rgba(208, 198, 188, 0.778); */
      background-color: #b5aea7b7;
     background-blend-mode: darken;
      /* mix-blend-mode: difference; */
      z-index: 2;
  }
  
  /* nav > div{
      flex:1
  } */
  .logo{
      align-items: center;
      font-family: "Canopee";
  }
  
  .logo a{
      text-decoration: none;
      font-size: 30px;
      color: #141412;
  }
  .toggle-btn{
      display: flex;
      justify-content: flex-end;
  }
  
  .burger{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1.75em 2em 1.5em 2em;
      background-color: #ffffff00;
      outline: none;
      border: none;
      width: 28px;
      height: 20px;
      transition: all 250ms ease-out;
      cursor: pointer;
   
  }
  
  .burger:before,
  .burger:after{
      content: "";
      width: 40px;
      height: 2px;
      position: absolute;
      background-color: #141412;
      transition: all 250ms ease-out;
      will-change: transform;
  }
  
  .burger:before{
      transform: translateY(-3px);
  }
  .burger:after{
      transform: translateY(3px);
  }
  .active.burger:before{
      transform: translateY(0) rotate(45deg);
  }
  .active.burger:after{
      transform: translateY(0) rotate(-45deg);
  }
  
  .overlay{
      z-index: 10;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      background-color: #141412;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      will-change: transform;
  }
  .overlay-menu{
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      gap: 1em;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  .menu-item{
      display: flex;
      cursor: pointer;
      clip-path: polygon(100 100, 100% 0, 100 100, 100 100); 
  }
  
  .menu-item p {
      color: #cdc6be;
      position: relative;
      text-align: center;
      font-family: "Canopee";
      font-size: 10vw;
      line-height: 80%;
      will-change: transform;
      transition: letter-spacing 0.3s;
  }
  .menu-item p:hover{
      letter-spacing: 0.075em;
  }
  .menu-item p#active::after{
      content: "";
      position: absolute;
      top: 45%;
      left: 0;
      transform: translateY(-50%);
      width: var(--after-width, 0); /* Default is 0, updated via JS */
      height: 12px;
      background-color: #c03f13;
  }
  .sub-nav{
      position: absolute;
      bottom: 5%;
      left: 50%;
      display: flex;
      gap: 0.5em;
      transform: translateX(-50%);
      opacity: 0;
  }
  
  .sub-nav p{
      font-family: "Canopee";
      font-size: 30px;
      color: #cdc6be;
  }
  
  
  
  .website-content {
      padding-bottom: 100px; /* Extra space for scrolling */
  }
  
  
  .overlay-nav{
      border-bottom: 2px solid #cdc6be3f;
      position: fixed;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:1.5em 2em;
      color: #cdc6be;
      background-color: #141412;
      /* mix-blend-mode: difference; */
      z-index: 2;
  }
  
  
  .overlay-nav .logo1{
      align-items: center;
      font-family: "Canopee";
  }
  
  .overlay-nav .logo1 a{
      text-decoration: none;
      font-size: 30px;
      color: #cdc6be;
  }
  .overlay-nav .toggle-btn1{
      display: flex;
      justify-content: flex-end;
  }
  
  .overlay-nav .burger1{
     
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1.75em 2em 1.5em 2em;
      background-color: #ffffff00;
      outline: none;
      border: none;
      width: 28px;
      height: 20px;
      transition: all 250ms ease-out;
      cursor: pointer;
   
  }
  
  .overlay-nav .burger1:before,
  .burger1:after{
      content: "";
      width: 40px;
      height: 2px;
      position: absolute;
      background-color: #cdc6be;
      transition: all 250ms ease-out;
      will-change: transform;
  }
  .overlay-nav .burger1:before {
      transform: translateY(0px) rotate(-45deg);
  }
  .overlay-nav .burger1:after {
      transform: translateY(0px) rotate(45deg); 
  }
  .overlay-nav .active.burger1:before {
      transform: translateY(-3px) rotate(0deg); 
  }
  .overlay-nav .active.burger1:after {
      transform: translateY(3px) rotate(0deg);
  }
  
  @media (max-width: 900px) {
      .logo a {
          font-size: 20px; /* Smaller font for screens below 900px */
      }
  
      .menu-item p {
          font-size: 8vw;
      }
  
      .sub-nav p {
          font-size: 16px;
      }
  }
  
  @media (max-width: 600px) {
      .logo a {
          font-size: 15px; /* Even smaller for smaller screens */
      }
  
      .menu-item p {
          font-size: 25vw;
      }
  
      .sub-nav p {
          font-size:16px;
      }
      .overlay-nav .logo1 a{
        font-size: 15px;
      }
      .info{
          font-size: 12px;
      }
      .info1{
          font-size: 12px;
      }
  }
  

.main, footer{

    background-image: url(./Assets/bg.jpg);
    /* background-color: rgba(208, 198, 188, 0.778); */
    background-color: #b5aea7b7;
    background-blend-mode: darken;
}

.cross-container {
    position: relative;
    width: 60px; /* Adjust size */
    height: 130px;

    transition: transform 0.5s ease; /* Smooth rotation transition */
}

.linec {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%; /* Full width for the horizontal line */
    height: 1.5px; /* Thickness of the lines */
    top: 50%; /* Center it vertically */
    left: 0;
    transform: translateY(-50%);
}

.vertical {
    transform: rotate(90deg); /* Rotate to make it vertical */
    transform-origin: center;
}

/* Rotate on hover */
.cross-container:hover {
    transform: rotate(360deg);
}


.vertical-line2 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 1px;
    height:100%;
    background-color: rgba(18, 1, 1, 0.2);
    transform-origin: bottom;
}
.borderbox:hover .vertical-line2{
    transition: 0.5s ease;
    transform: scaleY(0.9);
    background-color: black;
}
.horizontal-line2 {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 10%;
    height: 1px;
    transform-origin: left;
    background-color: rgba(18, 1, 1, 0.2);
}


.borderbox:hover .horizontal-line2{
    transition: 0.5s ease;
    transform: scaleX(2);
    background-color: black;
    }

.cir{
opacity: 0;

}
.borderbox:hover .cir{
    opacity: 1;
    transition: 0.4s ease;
    border:1px solid rgba(18, 1, 1, 0.312);
    background-color: transparent;
}

.borderbox:hover .head{
    transition: all ease 1s;
    transform: rotateX(360deg);
}
.borderbox:hover .imgbox{
    transition: 0.5s ease;
    transform: translatex(2.5vh);
}

@media (max-width: 767px) {
    .cir{
        opacity: 0;
        
        }
        .borderbox:hover .cir{
            opacity: 0;
        }
       
        .vertical-line2 {
            position: absolute;
            top: 0%;
            left: 3%;
            width: 1px;
            height:100%;
            background-color: rgba(18, 1, 1, 0.2);
            transform-origin: bottom;
        }
         
        .horizontal-line2 {
            position: absolute;
            bottom: 0%;
            left: 3.3%;
            width: 10%;
            height: 1px;
            transform-origin: left;
            background-color: rgba(18, 1, 1, 0.2);
        }

  }
 .timeline>span{
    display: inline-block;
  }
  
.marque{
    font-family: canopee;
    width: 100%;
    padding: 0.8vw;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 2px solid rgb(44, 44, 44);
  }
  
  .marque h1{
    display: inline-block;
    font-size: 6.5vw;
    font-weight: 400;
    text-transform: capitalize;
    margin-right: 16px;
    letter-spacing: 3px;
    animation-name: move;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  @keyframes move{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(calc(-100% - 20px));
    }
  }
  
  .marque:hover h1{
    animation-play-state: paused;
  }