*{
  margin: 0 ;
  padding: 0;
  box-sizing: border-box;

}

html,body{
  width: 100%;
  height: 100%;
  background-color:#EFEAE3 ;
  /* overflow-x: hidden;
     */
}

header,main,
.part-two-section{
  margin: 20px 40px 0px 40px;
}

nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu{
  display: flex;
  align-items: center;
}

nav h4 {
    margin-right: 10px;
    padding: 10px 20px;
    border: 1px solid #0000003c;
    border-radius: 50px;
    font-weight: 500;
    color: #000000bb;
      transition: all ease 0.4s;
    position: relative;
    font-size: 18px;
   
    overflow: hidden;
    
}

nav h4::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  left: 0;
  bottom: -100%;
  border-radius: 33px;
   transition: all ease 0.4s;
}

nav h4:hover::after{
  bottom: 0;
  border-radius: 0;
}

nav h4 a {
    color: #000000bb;
    text-decoration: none;
    position: relative;
    z-index: 9;
    font-weight: bold;
}

nav h4 :hover{
  color: white;
}

.body{
  /* border: 1px solid red; */
  min-height: 400px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom:30px;
   
}



main .details{
  font-size: 15px;
  font-weight: bold;
  /* border: 1px solid red; */
  height: 120px;
  width: 200px;
  
}

main .heading{
  font-size:50px;
  font-weight: bold;
  text-align: right;
  line-height:80px;
 
}

.video{
  position: relative;
  padding-top: 30px;
 
  width: 100%;
  
}

video{
  width: 100%;
  border-radius: 30px;
}

.blur-shade{
  margin: 0 0px 0px 40px;
  position: absolute;
  height: 40vw;
  width:46vw;
   right: 0;
  top: 70vh;
  
  background-color:#FE360A;
   filter: blur(10px);
   border-top-left-radius: 99%;
 
}

.hero-2,
.hero-3{
  /* margin-right: 40px; */
  position: absolute;
  width: 30vw;
  height: 30vw;
 background-color:#FE360A;
  /* border-radius: 50%; */
  border-radius:50% ;
 
 
  filter: blur(15px);
}

.hero-2{
  animation-name: anime2;
  animation-duration:1s ;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

  .hero-3{
    overflow: hidden;
  animation-name: anime1;
  animation-duration:1s ;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

.blur-shade::-webkit-scrollbar{
  display: none;
}

.moved-part{
  display: flex;
  overflow: hidden;
}


.moving
{
  /* border: 1px solid red;  */
  padding: 50px 0;
  display: inline-flex;
   flex-wrap: nowrap;
   align-items: center;
    gap: 20px;
    animation-name: moving;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

}



.moving h1{
  font-size: 8rem;
}

.moving::-webkit-scrollbar{
  display: none;
}

.golla{
   display: block;
  margin: 60px 3px;
  height: 100px;
  width: 100px;
  background-color: #FE360A;
  border-radius:  50%;
}

@keyframes anime1{
 from{
  transform: translate(40%,-10%);
 }
 to{
  transform: translate(4%,-10%);
 }
}
@keyframes anime2{
 from{
  transform: translate(5%,-10%);
 }
 to{
  transform: translate(10%,30%);
 }
}

@keyframes moving{
  from{
    transform: translate(0);
  }
  to{
    transform: translate(-100%);
  }
}

.part-two-section{
  /* border: 1px solid rebeccapurple; */
  width: 95%;
  height:100vh ;
}

.part-two-section{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40%;
  
}

.part-two-heading{
  font-size: 3.3em;
  line-height: 50px;
  z-index: 9;
  
}

.image-para{
  display: flex;
  flex-direction: column;
  
  align-items: flex-end;
  

   
}

.image-para img{
  height: 100px;
  width: 200px;
  border-radius: 20px;
  margin-bottom: 2px;
  
}
 .twosecpera{
   
  
  /* border: 1px solid saddlebrown; */
    font-weight: 200;
    margin-top: 2vw;
    font-size: 1vw;
    height: 50px;
    width: 200px;
 }

 .golla-orange1,
 .golla-orange2{

  height: 400px;
  width: 400px;
  background-color: orangered;
  border-radius: 50%;
  position: absolute;
  margin-top: 200px;
  margin-left: 300px;
  filter: blur(50px);
  z-index: -1;
 
 }

 .golla-orange1{
  animation-name: round1;
  animation-duration: 3s;
  animation-iteration-count: infinite ;
   animation-timing-function: ease-in-out;
 }

 .golla-orange2{
  animation-name: round2;
  animation-duration: 3s;
  animation-iteration-count: infinite ;
   animation-timing-function: ease-in-out;
 }

 


 @keyframes round1{
  from{
    transform: translate(0,0px) skew(0);
  }
  to{
    transform: translate(20%,-10px) skew(-12deg);
  }
 }

 @keyframes round2{
  from{
    transform: translate(-10,0px)skew(0);
  }
  to{
    transform: translate(-20%,10px)skew(-12deg);
  }
 }

 .page3{
  margin-top: 100px;
  height: 100vh;
  width: 100%;

 }

 .elem{
  
  height: 150px;
  width: 100%;
  /* background-color: rgb(74, 29, 29); */
  display: flex;
  align-items: center;
  position: relative;
  /* border-top: 1px solid gray; */
  border-bottom: 1px solid gray;
  overflow: hidden;
 }

 .elem h2{
  padding: 40px;
  font-size: 1.5em;
  z-index: 9;
 }

 .elem .overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgb(238, 156, 4);
  top: -100%;
  transition: all ease 0.3s;
  
 }

 .elem:hover .overlay{
  top: 0;
 }

 #fixed-img{
  height: 30vw;
  width: 24vw;
  background-color: red;
  border-radius: 10px;
  position: fixed;
  top: 25%;
  left: 50%;
  z-index: 99;
  display: none;
  background-size: cover;
  background-position: center;
 }