*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gilroy', sans-serif;
}
html,body{
    height: 100%;
    width: 100%;
}
nav{
    width: 100%;
    color: white;
    position: fixed;
    top:0%;
    z-index: 99;
    padding: 2vh 9vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    cursor: pointer;
    height: 12vh;
    background-color: #111111;
}
nav h1{
    font-weight: 500;
    font-size: 1.8vw;
    margin-right: 3vw;
}
nav #actions{
    width: 70%;
    /* background-color: rgb(0, 255, 76); */
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    padding: 1vh 0;
    position: relative;
    z-index: 10 ;

}
nav #actions a{
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.8vw;
    margin-bottom: 1vw;
    display: inline-block;
    position: relative;
}
.nav-elem h5 {
   margin-top: 0.9vw;
   opacity: 0;
   overflow: hidden;
}
nav #actions h5 span{
    font-weight: 400;
    font-size: 0.6vw;
    display: inline-block;
    transform: translateY(25px);
}
nav button{
    font-weight: 300;
    font-size: 1vw;
    background-color: #0BA34E;
    border: none;
    padding: 10px 20px;
    text-transform: uppercase;
    color: #fff;
    border-radius: 23px;
    vertical-align: middle;
}

#nav-bottom{
    width: 79.9%;
    height: 0vh;
    position: absolute;
    background-color:#111111;
    top:100%;
    z-index: 9;
    border-bottom: 1px solid #dadada;
    overflow: hidden; 
    transition: height 0.2s ease;
}
nav .down-arrow{
    position: absolute;
    bottom: -10%;
    left:50%;
    transform: translateX(-50%);
    font-size: 1.7vw;
    z-index: 10;
    cursor: pointer; 
  transition: transform 0.5s ease; 
  color: #0ad863;
  font-weight: 900;
}
main{
    position: relative;
    overflow: hidden;
}
.section{
    height: 100vh;
    width: 100%;
    position: relative;
    background-color: #111111;
    color: white;
    
}
#section-1{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  border-bottom:  1px solid rgb(76, 76, 76);
  z-index: 9;
  position: relative;
 
}
#section-1 h1{
     text-transform: uppercase;
     font-size: 7.5vw;
     font-weight: 900;
     line-height: 8vw;
     text-align: center;
     margin-bottom: 6vh;
    
}
#section-1 h1  i{
     
     font-size: 3vw;
     background-color: #0DA34E;
     padding: 2vw;
     border-radius: 50%;
  color: white;
  vertical-align: middle;
  position: relative;
  top: -0.9vw; /* ⬅ fine-tune vertical centering */
}
     

#section-1 h1 span{
     font-size: 7vw;
}
#section-1 p{
     font-size: 1.3vw;
     font-weight: 400;
     margin-bottom: 10vh;
     text-transform: capitalize;
     margin-bottom: 3vh;

}
#section-1 p span{
    color: #0DA34E;
    font-weight: 600;
}
#section-1 h2 {
    font-size: 1.3vw;
    font-weight: 100;
    text-transform: lowercase;
    position: relative;
}
#section-1 h2::after {
    content: "";
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #0DA34E;
    position: absolute;
    right:-3.7%;
}
#section-1 h2 span{
    padding: 10px 15px ;
    border: 1px solid white;
    border-radius: 25px;
}

#section1-footer{
    width: 44%;
    margin-top: 10vh;
    white-space: nowrap;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 7vh;
    padding: 2vw;
    position: relative;
}
#blur-left{
    height: 100%;
    width: 19%;
    background-color: red;
    position: absolute;
    left: -9%;
    top:0;
    z-index: 2;
     background: linear-gradient(to right,#111,transparent);
}
.scroll{
    overflow: hidden;
    animation: anim 7s linear  infinite  ;
    display: inline-block;
}
.scroll img{
   height: 1.5vw;
margin: 0 1.2vw;
}
#blur-right{
    height: 100%;
    width: 19%;
    background: linear-gradient(to right,transparent,#111);
    position: absolute;
    right: -9%;
    top:0;
    z-index: 2;
}
@keyframes anim {
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-100%);
    }
}



#section-2{
    /* background-color: rgb(0, 21, 255); */
    padding: 0 5vw;
    display: flex;
    justify-content: center;
  
}
#section2-left{
    height: 100vh;
    width: 45%;
    /* background-color: red; */
    padding: 8vh 0 20vh 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
   
}
#section2-left h5{
      font-size: 15px;
}
#section2-left p{
   width: 59%;
   font-size: 16px;
}
#section2-right{
    height: 100vh;
    width: 45%;
    /* background-color: rgb(0, 255, 55); */
    position: relative;
    cursor: pointer;
}
.section2-right-elem{
    height: 22vh;
    /* background-color: rgb(108, 26, 175); */
    width: 100%;
    padding: 2vw 0vw;
    border-bottom: 0.5px solid #545454;
    position: relative;
    z-index: 9;
  /* overflow: hidden; */

}
.section2-right-elem h3{
    font-size: 22px;
    font-weight: 100;
}
.circle{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    /* background-color: red; */
    position: absolute;
    z-index: 10;
    object-position: center;
    object-fit: cover;
    opacity: 0;
    scale:0;
    pointer-events: none;
}
#section-3{
    /* background-color: rgb(216, 35, 95); */
    background-image: url("assets/images/section-3-img.webp");
    background-position: center;
    background-size: cover;
    position: relative;
     display: flex;
    justify-content: center;
    align-items: center;
}

#section3-center{
    /* background-color: red; */
    height: 30vh;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:1vw;

}
#section3-center #icon{
   
   padding: 4vw ;
   background-color: #fff;
   border-radius: 50%;
}
#section3-center i{
   color: #111;
   font-size: 2vw;
}
#section3-center button{
   color: #111;
   font-size: 0.8vw;
   padding:0.5vw 1.5vw ;
   background-color: #fff;
   border: none;
   border-radius: 1vw;
   text-transform: uppercase;
   font-weight: 600;
   opacity: 0;
   transition:  all ease 0.5s;
   transform: translateY(10%);
}
#section3-center:hover button{
   opacity: 1;
    transform: translateY(0%);
}
#section-3 video{
    height: 100%;
    width: 100%;
    position: absolute;
    object-fit: cover;
    object-position: center;
     z-index: 99;
    /* Used as uss video ko x se 0.7 kardo i,e chota and y se 0 so abhi hide kar jaye & opacity:0  */
    transform: scaleX(0.7) scaleY(0);
    opacity: 0;
    border-radius: 30px ;
}

#section-4{
  min-height: 100vh;
    width: 100%;
    background-color: #fff;
    position: relative;
    padding-bottom: 13vh;
}


.section4Elem {
    width: 100%;
    height: 72vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13vh 10vw;
    padding-bottom: 0;
}

.sec-left {
    height: 100%;
    width: 25%;
    padding-top: 3vh;
    /* background-color: aqua; */
    border-top: 2px solid #000;

}

.sec-left h2 {
    font-size: 2.1vw;
    font-weight: 500;
    color: #000;
}

.sec-left p {
    color: #000;
    margin-top: 10vh;
    font-size: 1.2vw;
    /* width: 80%; */
}

.sec-right {
    height: 100%;
    width: 70%;
    /* background-color: blanchedalmond; */
    position: relative;
}

.sec-right img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.sec-right video {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    opacity: 0;
    transition: opacity ease 0.1s;
}


#section-5 {
    min-height: 100vh;
    background-color: #111;
    width: 100%;
    position: relative;
    padding: 5vh 10.5vw;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    color: #fff;
}

#section-5>button {
    background-color: #0BA34E;
    padding: 0.9vw 2.5vw;
    font-weight: 600;
    font-size: 1vw;
    border-radius: 50px;
    border: none;
    position: sticky;
    top: 15%;
    color: white;
    font-weight: 100;
}

#section5-right {
    width: 70%;
}

#section5-right > p {
    font-size: 2.1vw;
}

#section5-right > p span {
    /* background-color: red; */
    width: 15vw;
    display: inline-block; /*span bydefault inline hota so uspe styling nhi hoti isliye inline-block*/
}

#section5-content {
    width: 100%;
    /* background-color: red; */
    margin-top: 5vh;
    padding: 5vh 0;
}

#section5-content h1 {
    font-size: 3vw;
    font-weight: 500;
}

#section5-content #flex {
    display: flex;
    margin-top: 4vh;
    margin-bottom: 4vh;
}

#section5-content #flex h4 {
    border-radius: 50px;
    border: 1px solid #fff;
    padding: 10px 20px;
    font-weight: 400;
    font-size: 0.8vw;

}

.section5-elem {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 3vh;
    padding-bottom: 9vh;
    overflow: hidden;
    border-top: 1px solid #333;
    position: relative;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}

.section5-elem p {
    width: 55%;
    font-size: 0.8vw;
    position: relative;
    z-index: 8;
}

.section5-elem h3 {
    font-size: 1.6vw;
    font-weight: 400;
    position: relative;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
    z-index: 8;
}

.section5-elem i {
    font-size: 1vw;
    position: relative;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
    z-index: 8;
}

.over {
    height: 100%;
    width: 100%;
    background-color: #222;
    position: absolute;
    top: 0;

    /*Start me hamne over div ko completely upar bhej diya elem div ke -100% se and hover pe waps le aaya */
    transform: translateY(-100%);
    opacity: 0;
    /* display: none; */
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; 
    /* Animate all properties smoothly in 1 second, following the custom speed curve defined by the numbers in cubic-bezier(). */
}

/* elem pe hover pe padding do only h3 pe left se and i ko right se */
.section5-elem:hover h3 {
    padding-left: 1vw;

}

.section5-elem:hover i {
    padding-right: 1vw;
}

/*Hover pe elem ke opacity 1 and wapis neeche le aao over div ko*/
.section5-elem:hover .over {
    transform: translateY(0);
    /* display: initial; */
    opacity: 1;
}

.section5-elem:hover {
    border-top: 2px solid #fff;
}

/*Summary  pr cursor pointer jisse pta chale ki ye click karna hai*/
summary{
    cursor: pointer;
}

/*Code for remove the marker of*/
summary::marker {
    content: "";
}

.uiux {
    border-top: 1px solid #333;
    padding: 3vh 0;
}

.product {
    padding: 3vh 0;

    border-top: 1px solid #333;
}


#section-6 {
    min-height: 100vh;
    width: 100%;
    /* background-color: #111; */
    background-color: #fff;
    padding: 10vh 10vw;
}

#section-6 > h1 {
    font-size: 5.5vw;
    color: #000;
    /* background-color: red; */
    padding-left: 23vw;
    padding-right: 5vw;
    line-height: 5.8vw;
    padding-bottom: 10vh;
    border-bottom: 1px solid #dadada;
}

#section6-content {
    /* background-color: red; */
    color: #000;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8vh 0;

}

#section6-content #right-6 {
    width: 70%;
}

#section6-content #right-6 p {
    font-size: 1.5vw;
    color: #000;
    margin-bottom: 5vh;
    width: 80%;
}

#blue-btn {
    background-color: #4f5bff;
    width: 15vw;
    height: 3.5vw;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

#blue-btn h4 {
    position: absolute;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.85vw;
    /* letter-spacing: 1px; */
}

#blue-btn h4 i {
    font-size: 1.1vw;
    font-weight: 100;
    margin-left: 0.5vw;
}

#section6-bottom {
    height: 44vh;
    width: 100%;
    /* background-color: red; */
    border-top: 1px solid #dadada;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* background-color: rgb(48, 48, 48); */
    /* color: #000; */
    color:white;
}

#btm6-part1 {
    border-right: 1px solid #dadada;
    width: 30%;
    /* background-color: red; */
    height: 100%;
}

#btm6-part2 {
    border-right: 1px solid #dadada;
    width: 28%;
    /* background-color: red; */
    height: 100%;
}

#btm6-part3 {
    border-right: 1px solid #dadada;
    width: 15%;
    /* background-color: red; */
    height: 100%;
}

#btm6-part4 {
    border-right: 1px solid #dadada;
    width: 15%;
    /* background-color: red; */
    height: 100%;
}

#btm6-part5 {

    width: 15%;
    /* background-color: red; */
    height: 100%;
}

.btm6-parts {
    padding: 3vh 0.6vw;
}

.btm6-parts h5 {
    color: #000;
    font-weight: 500;
    font-size: 0.9vw;
    margin-bottom: 4vh;
}

.btm6-parts h4 {
    background-color: #111;
    width: 75%;
    padding: 5px 10px;
    margin-bottom: 0.3vh;
    border-radius: 50px;
    font-size: 0.85vw;
    display: flex;
    align-items: center;
    font-weight: 500;

}

.btm6-parts h4 span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5vw;
    height: 1.5vw;
    background-color: #333;
    padding: 0.5vw;
    border-radius: 50%;
    margin-right: 1vw;
}


/*h4 ka 2nd child isliye liya hai otherwise vo jo heading product strategy ko consider karlega otherwise */
/* 
Ye isliye kar rahe kyuki jitne h4 hai vo ek dusre ke exactly neeche nhi hai todha aage aage hai */


#btm6-part2 h4:nth-child(2){
    transform: translateX(0);
}
#btm6-part2 h4:nth-child(3){
    transform: translateX(10%);
}

#btm6-part2 h4:nth-child(4){
    transform: translateX(20%);
}
#btm6-part2 h4:nth-child(5){
    transform: translateX(30%);
}
#btm6-part2 h4:nth-child(6){
    transform: translateX(40%);
}
#btm6-part2 h4:nth-child(7){
    transform: translateX(50%);
}


#section-7 {
    height: 100vh;
    background-color: #111;
}