@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", serif;
}
:root{
  --primaryFont: "Inter", serif;
  --secondaryFont: "Montserrat", sans-serif, serif;
  --Orange: #e3720f;
  --Main-Color: #EBECE7;
  --DarkBG: #06171D;
    --hover-line-color: #000; /* Default black */
    --cursor-border-color: #000; /* Default border color for light mode */
    --Cursor-dot: #F5761D;



}
html{
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
    display: none;

}
::-webkit-scrollbar-thumb {
    background: #FF0000;
    display: none;
}






  
  /* HEADER SECTION */


  #header-1{
    display: none !important;
  }
  
  
  header{
    min-height: 12vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 10vw; */
    background-color: transparent;
    padding: 0 3.5vw;
    position: absolute;
    top: 0;
    z-index: 999;
    margin-top: 1vw;
    /* border: 1px solid red; */
    
}

.header-left-container{
    width: 30%;
    display: flex;
    justify-content: left;
    align-items: center;
    /* border: 1px solid red; */
}

/* Logo */
.header-left-container img{
    width: 15vw;
    opacity: 0; /* Initially invisible */
    animation: headerStarter 0.5s ease-in 0.5s forwards;
    /* margin-top: -0.8vw; */
}


.header-right-container{
    width: 70%;
    display: flex;
    justify-content: right;
    align-items: center;
    /* border: 1px solid yellow; */
}




/* Header Button */
.button-17 {
    align-items: center;
    appearance: none;
    background-color: #000;
    border-radius: 24px;
    border-style: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    fill: currentcolor;
    font-family: "Google Sans",Roboto,Arial,sans-serif;
    font-size: 1.1vw;
    font-weight: 500;
    height: 45px;
    justify-content: center;
    letter-spacing: .25px;
    line-height: normal;
    max-width: 100%;
    overflow: visible;
    padding: 2px 24px;
    position: relative;
    text-align: center;
    text-transform: none;
    transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 11vw;
    will-change: transform,opacity;
    z-index: 0;
    margin-bottom: -1.1vw;
    opacity: 0; /* Initially invisible */
    animation: headerStarter 1.5s ease-in 0.5s forwards;
  }
  
  .button-17:hover {
      transition: ease 0.2s;
      background: var(--Orange);
      color: #f3f3f3;
      transform: scale(1.04);
  }
  
  .button-17:active {
    box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
    outline: none;
  }
  
  .button-17:focus {
    outline: none;
  background-color: var(--Orange) ;
    color: #f3f3f3;
  }
  
  .button-17:not(:disabled) {
    box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
  }
  
  .button-17:not(:disabled):hover {
    box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
  }
  
  .button-17:not(:disabled):focus {
    box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
  }
  
  .button-17:not(:disabled):active {
    box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
  }
  
  .button-17:disabled {
    box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
  }


  @keyframes headerStarter{
    0%{
      opacity: 0;
      display: none;
    }
    100%{
      display: inline-block;
      opacity: 1;
    }
  }
  /* ------ */
  
  /* Navbar */
  
  .nav {
      height: 50px;
      width: 100%;
      /* background-color: #4d4d4d; */
      position: relative;
      margin-right: 2vw ;
      margin-bottom: -1.4vw;
    }
    
    .nav > .nav-header {
      display: inline;
    }
    
    .nav > .nav-header > .nav-title {
      display: inline-block;
      font-size: 22px;
      color: #fff;
      padding: 10px 10px 10px 10px;
    }
    
    .nav > .nav-btn {
      display: none;
    }
    
    .nav > .nav-links {
      display: inline;
      float: right;
      opacity: 0; /* Initially invisible */
      animation: headerStarter 0.5s ease-in 0.2s forwards;    
      font-size: 18px;
    }
    
    .nav > .nav-links > a {
      width: auto;
      display: inline-block;
      padding: 13px 1.5vw;
      text-decoration: none;
      color: #000;
      font-weight: 600;
      position: relative; /* Needed for the pseudo-element */
      transition: all 0.3s ease; /* Smooth transition */
      /* border: 1px solid red; */
      opacity: 0; /* Initially invisible */
      animation: headerStarter 0.5s ease-in 1s forwards;    
    }
    
    .nav > .nav-links > a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px; /* Line thickness */
      background-color: var(--hover-line-color); /* Use the CSS variable */  /* Line color */
      /* background-color: #000; */
      transition: width 0.3s ease; /* Smooth animation */
    }
    
    .nav > .nav-links > a:hover {
      transform: scale(1.1);
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Shadow effect */
    }
    
    .nav > .nav-links > a:hover::after {
      width: 100%; /* Expand the line */
    }
    
    .nav > #nav-check {
      display: none;
    }


    
    @media (max-width:600px) {

      body, .Hero-Section{
        width: 100vw !important;
        overflow-x: hidden !important;
      }

      .header{
        display: none !important;
      }
      

      .custom-cursor-circle, .inner-dot{
        display: none !important;
      }


      .nav > .nav-btn {
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 0px;
      }
      .nav > .nav-btn > label {
        display: inline-block;
        width: 50px;
        height: 50px;
        padding: 13px;
      }
      .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
        background-color: rgba(0, 0, 0, 0.3);
      }
      .nav > .nav-btn > label > span {
        display: block;
        width: 25px;
        height: 10px;
        border-top: 2px solid #eee;
      }
      .nav > .nav-links {
        position: absolute;
        display: block;
        width: 100%;
        background-color: #333;
        height: 0px;
        transition: all 0.3s ease-in;
        overflow-y: hidden;
        top: 50px;
        left: 0px;
      }
      .nav > .nav-links > a {
        display: block;
        width: 100%;
      }
      .nav > #nav-check:not(:checked) ~ .nav-links {
        height: 0px;
      }
      .nav > #nav-check:checked ~ .nav-links {
        height: calc(100vh - 50px);
        overflow-y: auto;
      }
    }
  /* Navbar */
  

  /* .header{
    width: 100vw;
    height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
} */

@media (max-width: 500px) {
    .checkbox-label{
        width: 12vw;
        height: 6vw;
    }
    .fa-moon,.fa-sun{
        font-size: 3vw;
    }
    .ball{
        width: 4vw;
        height: 4vw;
        right: 11vw;
    }
    body.dark .ball{
        width: 5vw;
        height: 5vw;
    }    
    .checkbox:checked + .checkbox-label + .ball {
        transform: translateX(5.2vw);
    }
}

  


    /* Custom cursor outer circle */
    .custom-cursor-circle {
      position: fixed;
      top: 0;
      left: 0;
      width: 4vw; /* Size of the outer circle */
      height: 4vw;
      border: 1px solid var(--cursor-border-color); /* Use the CSS variable */
      /* border: 1px solid #000;  */
      border-radius: 50%; /* Makes it a circle */
      background-color: transparent; /* Transparent center */
      pointer-events: none; /* Prevent blocking interactions */
      z-index: 1000; /* Ensure it appears above all content */
      transform: translate(-50%, -50%); /* Center the cursor around the pointer */
      transition: left 0.1s ease, top 0.1s ease; /* Smooth movement with delay */
    }

    /* Inner dot */
    .inner-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* Center the dot inside the circle */
      width: 10px; /* Size of the inner dot */
      height: 10px;
      border-radius: 50%; /* Make it circular */
      background-color: var(--Cursor-dot); /* Inner dot color */
    }

    /* Hover state for button and anchor */
    button:hover, a:hover {
      cursor: none; /* Hide the default cursor */
    }

    /* Hover state for custom cursor */
    button:hover .custom-cursor-circle, a:hover .custom-cursor-circle {
      border-color: yellow; /* Change border color to yellow */
      transform: scale(1.05); /* Scale up the cursor */
    }