body{
  font-family: "Open Sans", sans-serif;

}

#myBtn {
position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 20px;
  line-height: 0;
  outline: none;
  color: black;
  cursor: pointer;
  padding: 12px 12px;
  border-radius: 4px;
  backdrop-filter: blur(5px);
  background: transparent;
  border: 1px solid rgba(0,0,0,0.2);
}

#myBtn:hover {
  background-color: #555;
}

.eiko-title{
font-family: "Outfit", sans-serif;
}

.h_v_mob{
position: absolute;
  min-width: 100vw;
  min-height: 90vh;
}

.nav-mob{
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(50px);
}

img{
  width: 100%; 
} 

 .logo{
    height: 50px;
    width: auto;
  }

 .hero_banner {
  display: block;
  position: relative;
  height: 90vh;
  overflow: hidden;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;
  background-position: center;
  background-size: cover;
}



 .video_container {
    top: 60%;
  }


.h_v {
  position: absolute;
  min-width: 100vw;
  min-height: 100vh;
}


 .float-wrapper {
    text-align: left;
    position: absolute;
    width: 100%;
    z-index: 3;
    height: 100%;
    color: #000;
    border-radius: 30px;
background: #ffffff;
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.6) 87%, rgba(255, 255, 255, 1) 100%);
padding: 25px;
  }

 .bg-ek {
    background: url('../img/bgeiko.svg');
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    position: absolute;
    z-index: 1;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
    display: flex;
  }


.text-center-mob{
text-align: center;
}

.bg-blue {
    background: #1a5fab !important;
  }

    .bg-green {
    background: #58338D !important;
  }

.bg-green-g{
  background: #1F8F08;
}
  .p-radius{
  border-radius: 30px;
}

.w-stk{
  width: auto;
background: #e8eaed;
background: linear-gradient(45deg, rgba(232, 234, 237, 1) 0%, rgba(222, 230, 237, 1) 86%, rgba(100, 185, 231, 1) 100%);
}



/*aninate*/


.anp1 {
    animation: mymove 4s;
    animation-iteration-count: 1;
    animation-iteration-count: infinite;
    width: auto;
    position: absolute;
  }


 @keyframes mymove {
    0% {
      bottom: 0px;
    }

    50% {
      bottom: 15px;
    }

    50% {
      bottom: 10px;
    }

    100% {
      bottom: 0px;
    }
  }

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 822;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/*animate ends*/

 .pc-1 {
    height: 35vh;
    background: gray;
    background-size: cover !important;
    background-position: center !important;
    background-size: 100% !important;
    transition: all 2s ease-in-out !important;
  }

 .pc-1-i {
    background: url('../img/alu4.png');
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: cover !important;
  background-position: center !important;
  }

.txt-bnnr {
    position: absolute;
    color: #fff;
    padding: 40px;
  }


.bg-gradient{
  background: linear-gradient(45deg, rgba(232, 234, 237, 1) 0%, rgba(222, 230, 237, 1) 86%, rgba(100, 185, 231, 1) 100%);
    background-color: rgba(0, 0, 0, 0);
}


.bg-acr{
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.50);
}

.bg-acr-b{
  background: url('../img/industry.webp');
}

@media (min-width: 360px) { 


 }


@media (min-width: 768px) { 


 }


@media (min-width: 1200px) {


}


@media (min-width: 1400px) { 



  .logo{
    height: 50px;
    width: auto;
  }

  .hero_banner {
  display: block;
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;
  background-position: center;
  background-size: cover;
}

 

  .video_container {
    position: absolute;
    z-index: 2;
    margin: auto;
    right: 0;
    left: 0;
     top: 25%;
}


  .video_container_2 {
    position: absolute;
    z-index: 2;
    margin: auto;
    right: 0;
    left: 0;
     top: 20%;
}

  .dark-mask-absolute {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.1);
  height: 100%;
  width: 100%;
  z-index: 1;
}

.h_v {
  position: absolute;
  min-width: 100vw;
  min-height: 100vh;
}

.home_top_title {
  font-size: 5vw;
  line-height: 1;
  font-weight: 100;
  color: white;
}


/*image zoom*/

/* [1] The container */
.img-hover-zoom {
  height: auto; /* Set a fixed height for the container, adjust as needed */
  overflow: hidden; /* Hide the overflowing parts of the zoomed image */
}

/* [2] The image inside the container */
.img-hover-zoom img {
  /* Set initial dimensions and add a smooth transition */
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out; /* Smooth transition over 0.5 seconds */
  object-fit: cover; /* Ensures the image covers the container while maintaining aspect ratio */
}

/* [3] The zoom effect on hover */
.img-hover-zoom:hover img {
  transform: scale(1.1); /* Zoom the image to 110% of its original size */
}


/*zoom ends*/



.bg-green{
background: #58338D !important;
}

.bg-blue{
  background: #1a5fab !important;
}

.txt-bnnr{
  position: absolute;
  color: #fff;
  padding: 40px;
}

.t1{
font-size: 65px;
font-weight:bold;
}

.bg-1{
background: #5db276 !important;
}

.bg-2{
  background: #1a5fab !important;
}

.bg-3{
  background: #65bae8 !important;
}


#navbar {
  width: 100%;
  position: fixed; /* Makes the navbar stay at the top */
  top: 0;
  background-color: none;
   backdrop-filter: blur(20px); /* Initial transparent background */
  transition: background-color 0.3s ease-in-out; /* Smooth transition for the color change */
  padding: 10px 0; /* Add some padding so it's not too small */
  z-index: 99;
  background: none;
}

/*#navbar.scrolled {
  background-color: #000; 
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.23);
}*/

/* Add styles for your main content to ensure scrolling */
main {
  height: 200vh; /* Ensures the page is tall enough to scroll */
  padding-top: 80px; /* Prevents content from being hidden behind the fixed navbar */
}



 .sticky-content {
    position: sticky;
    width: 100%;
    top: 0px;
    height: 100vh;
    padding: 10px 0px;
  }


.custom-nav > .nav-item > .nav-link.active {
  color: #1a5fab;
  background: #fff;
}

.custom-nav > .nav-item > .nav-link {
  color: #646464;
  border: 1px solid #c4c4c4;
  padding: 13px 20px;
  border-radius: 4px;
  background: #ececec;
}

.cap{
background: rgba(0,0,0,0.4);
    padding: 3px 10px;
    border-radius: 50px;
}


.p_wrap {
  background-color: #8da2b9;
}

.p_wrap:hover {
  background-color: #1a5fab;
}


.anp1 {
    animation: mymove 4s;
    animation-iteration-count: 1;
    animation-iteration-count: infinite;
    width: auto;
    position: absolute;
  }


 @keyframes mymove {
    0% {
      bottom: 0px;
    }

    50% {
      bottom: 15px;
    }

    50% {
      bottom: 10px;
    }

    100% {
      bottom: 0px;
    }
  }

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 822;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.custom-nav > .nav-item > .nav-link:hover {
  background: #fff;
  border: 1px solid #1a5fab;
  transition: 0.5s ease-in-out;
}


 .hero_banner_2 {
    display: block;
    position: relative;
    height: 600px;
    overflow: hidden !important;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-position: center;
    background-size: cover;
  }


  .h_v {
        position: absolute;
        min-width: 100vw;
        min-height: 100vh;
     
    }

.h_v_2{
position: absolute;
        min-width: 100vw;
        min-height: 100vh;
top:-130px;
}


iframe{
background:#fff !important; 
}


.text-blue{
color: #1a5fab;
}


 .float-wrapper {
    text-align: left;
    position: absolute;
    width: 39%;
    z-index: 3;
    height: 100%;
    color: #000;
    border-radius: 30px;
    background: linear-gradient(90deg, rgb(42, 123, 155) 0%, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.54) 80%, rgba(255, 255, 255, 0) 100%);
  }


.float-wrapper > .h1{
    font-size: 6vw;
    line-height: 5vw;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.0.1);
    font-weight: 100;
    margin-bottom: 30px;
}


.bg-ek{
  background: url('../img/bgeiko.svg');
  position: absolute;
  z-index: 1;
  background-position: center;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: flex;
}


.pro-wrap{
width: 75%;
}

.p-radius{
  border-radius: 50px;
}

.pc-1{
  height: 35vw;
  background: gray;
  background-size: cover !important;
  background-position: center !important;
   background-size: 100% !important;
   transition: all 2s ease-in-out !important;
}

.pc-1-i{
  background: url('../img/alu4.png');
 
}


.pc-2{
  height: 25vw;
  background: gray;
  background-size: 100% !important;
  background-position: center !important;
   transition: all 2s ease-in-out !important;
}

.pc-2-i{
  background: url('../img/roll2.png');
}


.pt-bnnr{
font-size: 4vw;
}


.pc-1:hover {
    background-size: 110% !important;
}

.pc-2:hover {
    background-size: 120% !important;
}

.h-100{
  height: 100vh;
}

.w-stk{
  width: 500px;
background: #e8eaed;
background: linear-gradient(45deg, rgba(232, 234, 237, 1) 0%, rgba(222, 230, 237, 1) 86%, rgba(100, 185, 231, 1) 100%);
}

.dropdown-menu {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
}


.production{
  background: url('../img/production.webp');
}


.bg-green-g{
  background: #1F8F08;
}

.bg-eiko{
background: linear-gradient(45deg, rgba(232, 234, 237, 1) 0%, rgba(222, 230, 237, 1) 86%, rgba(100, 185, 231, 1) 100%);
}

.bg-g{
background: #2A7B9B;
background: linear-gradient(45deg, rgba(42, 123, 155, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(245, 245, 245, 1) 60%, rgba(51, 187, 255, 1) 100%);
}

.bg-acr{
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.50);
}

.bg-acr-b{
  background: url('../img/industry.webp');
}

.w-20{
  width: 20%;
}

.fh-s{
font-size: 1.2vw;
}

}