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

html,
body{
    width:100%;
    height:100%;
    font-family:  'Poppins',sans-serif!important;
  
}

body{
    font-family: 'Neue Montreal', sans-serif;
    height: 100vh;
    overflow-x: hidden;
    border:0px solid red !important;
    will-change: background ;
   /*  background: white; */
}
button{
  cursor: pointer;
}
.scene {
    will-change: transform;
	position: absolute;
  width: 100%;
  height: 100vh;
  top:100px;
  left:0%;
  z-index: -5;
  border: 0px solid red;
  opacity: 0.5;
}
.touchContainer{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.touchText{
  font-size: 18px;
  font-weight: 400;
}
.touchTextClick{
  font-size: 15px;
  font-weight: 300;
}
#myPath {
  transition: fill 0.5s ease;
}
#mySvg{
  border: 0px solid red;
 

}


#titleText {
  position: fixed !important; /* Fixed position */
  top: 180px; /* Adjust as needed */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust for precise centering */
  z-index: -10; /* Ensure it's above other content */
  border: 0px solid red;
}
.spacerprojects{
  z-index: 20;
  border: 0px solid red !important;
  margin-top: 60vh;
  height: 1600px !important;

}


.projectsTitleCont{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 1;
  border: 0px solid red !important;
  margin-top: 100px;
 
}
.projectTitle{
 font-size: 55px;
    letter-spacing: .56px;
    font-weight: 500;
  margin-top: 45px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.projectleft{
  border:0px solid red;
  height: 1300px;
  width: 450px;
  transform: translateY(0%);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  
}
.projectright{
  border:0px solid red;
  height: 850px;
  width: 450px;
  transform: translateY(-28%);
  margin-left: 0px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
.projectCard{
  
  border: 0px solid red;
  width: 400px;
  height: 400px;
  border-radius: 20%;
  
}

.projectCard1{
  background-image: url(./assets/myghpayproject2xs.jpg); 
	background-size: cover;

	/* background-attachment: fixed; */
}
.projectCard2{
  background-image: url(./assets/ticketsbgproxs.jpg); 
	background-size: cover;

	/* background-attachment: fixed; */
}

.projectCard3{
  background-image: url(./assets/natoursbgproxs.jpg); 
	background-size: cover;

	/* background-attachment: fixed; */
}

.projectCard4{
  background-image: url(./assets/trilloxs.jpg); 
	background-size: cover;

	/* background-attachment: fixed; */
}
.projectCard5{
  background-image: url(./assets/3dshirtbgxs.png); 
	background-size: cover;

	/* background-attachment: fixed; */
}



#maskCircle {
  transition: r 0.5s ease; /* Adjust time for slower or faster animation */
}
.footerbar{
 
  display: flex;
  border: 0px solid red;
  width: 100%;
  justify-content: space-between;
  padding: 0 30%;
}
.footerLeft{
display: flex;
flex-direction: column;
}
.footerRight{
  display: flex;
  flex-direction: column;
  }
  .email{
    border-bottom: 0.3px solid grey;
    font-size: 15px;
    font-weight: 200;
  }
  .address{
    font-size: 15px;
    font-weight: 400;
    color: grey;
  }
  .privacy{
    font-size: 12px;
    margin-top: -10px;
    text-align: right;
  }
  .socials{
display: flex;
justify-content: space-between;
border: 0px solid red;
width: 200px;

  }



#mySvg:hover #myPath {
 /*  //fill: black; */
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  transform-origin: center center;
  transform: scale(0);
  transition: transform 0.3s ease;
  pointer-events: none; /* Ensures the overlay doesn't interfere with mouse events */
}

.content-to-mask {
  -webkit-mask: url(#svgMask);
  mask: url(#svgMask);
  background-color: red; /* Red background */
  width: 392px; /* Match the SVG viewbox width */
  height: 393px; /* Match the SVG viewbox height */
  
  /* Additional styles */
}
.square{
  width: 20%;
  height:50vh;
  background-color: black;
  position: absolute;
  z-index: 5;

}




.wrapper{
    width:100%;
    height:100%;
}
.navButton{
    background-color: rgb(245, 113, 243);
    width: 100px;
    height: 38px;
    border-radius: 50px;
    outline: none !important;
    border: 0px solid red !important;
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;


}
.navButton:hover{
  transform: translateY(-10%);
}
.title_container{
    border:0px solid red !important;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 50px 0px;
    z-index: 100;
    margin-top: 120px;

}
.title_2_container{
    display: flex;
    flex-direction: column;
    border:0px solid blue;
    align-items: center;
    width: 70vw;
}
.title_1{
    color:grey;
    letter-spacing: 1.5px;
    font-size: 24px;
    font-weight: 400;
}
.title_2{
    border:0px solid red;
    font-size: 45px;
    font-weight: 400;
    line-height: 30px;
    width: 100%;
    text-align: center;

}

.title_2b{
    margin-top: 30px;
    width: 80%;
}
/* Media query for mobile devices */

.learn_button{
  margin-top: 0;
    border:1px solid black;
    height: 40px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
}
.left-nav{
    border: 0px solid red;;
    width: 20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.how_title{
  border: 0px solid red;
  width: 80%;
font-size: 1.5vw;
letter-spacing: 1px;
font-weight: 500;
  
}
.how_para{
  border: 0px solid red;
  width: 80%;
  color: black;
  margin-top: 10px;
font-size: 1vw;
color: #86868c;


}
.howcard{
  border: 0px solid red;
  width: 280px;
  height: 70%;
  border-radius: 25px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.card_containers{
  border:0px solid red;
  height: 300px;
  width: 1200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  transform: translateX(60%);
  margin-top: 50px;
}

.nav{
    height: 5vh;
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
    padding: 2em 2.5em;
   
    border-radius: 0px;
}
a{
    text-decoration: none;
    color: grey;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
}

.footer{
    position: absolute;
    bottom: 0;
    padding: 4em 2em;
    color:#5f5f5f
}

.transition{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100vh;
    top:0;
    left:0;
    pointer-events: none;
    background: #fff;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

}

.container{
    padding: 2em;
    border:0px solid red;
}

.header{
    position: relative;
    width: max-content;
    height: max-content;
}
.creative_header{
    left:50px;
}
h1{
    position: relative;
    line-height:1;
    letter-spacing: 0.2px;
    font-size: 120px;
    font-weight: 100;
    font-family: "Carpenter";
    color:black;
    top:120px;

}


.header-revealer{
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;

}
.header-revealer:after{
    content: "";
    position: absolute;
    top:120px;
    left:0;
    width: 110%;
    height: 110%;
    backgroundx: #0f0f0f;
    background-color: rgb(230, 125, 19)!important;



}

.overlay{
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index:2;
    display: flex;
    
   
}
.bar{
    width: 11vw;
    height: 105vh;
    background-color: #1a1a1a;
}
.counter{
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    color: #bcbcc4;
    padding: 0.2em 0.4em;
    font-size: 20vw;
    font-family: "Carpenter";
}

.header_container{
    position: relative;
    border:0px solid red;
    height: 80vh;
margin-top: 10vh;

}
.cardHeader{
border:0px solid red;
height: 40vh;
width: 500px;
position: absolute;
right: 0;
bottom: 10px;
}
.card{
    width: 250px;
    border:0px solid red;
    height: 80%;
    position: absolute;
    border-radius: 10px;

}
.cardOne{
   left: 20px;
   transform: rotateZ(-10deg);
  top:500px;
  background-color: rgb(246, 241, 193);
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; 




}
.cardTwo{
    right: -30px;
    transform: rotateZ(10deg);
  
  background-color: beige;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

}
.projects{
    height: 250vh;
    border: 0px solid red;
}
.home_about{
    border:0px solid red;
    height: 321px;
   
  border-radius: 10px;
  overflow:hidden !important;
  width: 100vw;
 


}

.home_about_cont{
    border:0px solid red;
    height: 300vh;
  border-radius: 1px;
  overflow-x:hidden;
  position: relative;


}



  .wrapperRollingText {
    white-space: nowrap;
    font-family: 'Playfair Display', serif;
    border-top: 0px solid #6f6f6f;
    background-color: rgba(255, 255, 255,0.8);
    height: 55px;
	background-color: rgb(230, 125, 19)!important;


    
  }
  .rollingText {
    font-size: 2vw;
    display: inline-block;
    padding-left: 10px;
    padding-bottom: 0px;
  }
  .wrapperRollingText02 {
    white-space: nowrap;
    font-family: 'Playfair Display', serif;
    margin-top: 0px;
    background-color: rgba(0,0,0,0.1);
  }
  .rollingText02 {
    font-size: 6vw;
    display: inline-block;
    padding-left: 13px;
    color: white;
  }
  span{
    font-family:sans-serif;
    font-weight:600;
    color:black;
  }
  
  .limits{
    position: absolute;
    top: 100vh;
    height: 10vh;
    width: 100px;
    border-top: 0px solid #6f6f6f;
    border-bottom: 0px solid #6f6f6f;
  }
  .half{
    position: fixed;
    top: 50vh;
    width: 100px;
    border-top: 0px solid green;
  }
  .hover-link {
    margin: 0 auto;
    border: none;
    background: none;
    color: #fff;
    
    border-bottom: solid 1px rgba(255, 255, 255, 0.2);
    padding: 0 0 0.2rem;
    font-family: "Monument Extended";
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: 0.4s ease all;
    animation-duration: 3s;
  background-size: 0%;
  overflow: hidden;
  }
  .hover-linkbg{
    position: absolute;
    bottom: 0;
    left:45%;
    height: 1px;
    width: 1px;
    opacity: 0;
    background-image: radial-gradient(#db7f38, #da6f05);
  z-index: 10;
  transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
  border-radius: 50%;
  }

  .hover-linkbg3{
    background-image: radial-gradient(#4eb382, #62c27c) !important;

  }
  .hover-linkbg2{
    background-image: radial-gradient(rgba(201, 61, 19, 0.8), rgba(201, 61, 19, 1)) !important;

  }
  
  .hover-link > span {
    overflow: hidden;
    display: block;
    position: relative;
    pointer-events: none;
    z-index: 20;
  }
  
  .hover-link > span > span {
    display: inline-block;
    font-weight: 100 !important;

  }
  
  .hover-link > span > span:nth-of-type(1) {
    transition: 0.4s ease all;
  }
  
  .hover-link > span > span:nth-of-type(2) {
    transition: 0.4s ease all;
    transition-delay: 0.07s;
  }
  
  .hover-link > span > span > span {
    content: attr(data-text);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(200%);
    color: white !important;
    font-weight: 100 !important;
  }
  
  .hover-link:hover > span > span,
  .hover-link:focus > span > span {
  
    transform: translateY(-200%);
  }
  .hover-link:hover > .hover-linkbg,
  .hover-link:focus > .hover-linkbg{
    /* background: linear-gradient(353deg, rgb(4, 4, 4) 0%, rgb(5, 5, 5) 38%, rgb(0, 0, 0) 100%);
    background-size: 100%; */
    opacity: 1;
    transform: scale(280);
  
  }
  
  #cursor {
    pointer-events: none;
    width: 3rem;
    height: 3rem;
    border: solid 1px rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    transition: 0.35s ease width, 0.35s ease height, 0.35s ease border,
      0.35s ease background;
    transform: translate(-50%, -50%);
  }
  
  #cursor.button {
    width: 5rem;
    height: 5rem;
    border: solid 1px transparent;
    background: rgba(255, 255, 255, 0.5);
  }
  .title_2_mob{
    display: none;
  }
  .mobile_who{
    display: none;
  }
  .mobile_projects{
    display: none;
  }
  .mobile_project_container{
    display: none;
  }
  .mobileskills{
    display: none;
  }
  .mobilecards{
    display: none;
  }
  .mobileTitle{
display: none;
  }
  .mobileFooter{
    display: none;
  }
  .mobileProjectTitle{
    display: none;
  }
  .navigation{
    display: none;
  }

  @media screen and (min-width: 1500px) and (max-width: 1920px) {
    /* CSS rules for 1080p TV screens */
    .details{
      padding: 40% 0;
   }
   .details_2{
    padding:33% 0 ;}
    .scene{
      height: 80vh !important;
      border:0px solid red;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1440px) {
  /* CSS rules for laptop screens */
  .details{
     padding: 30% 0;
  }
  .details_2{
    padding-top:15% ;
    padding-bottom:  50% !important;
  }
  .details_text_container{
	padding-left: 30%;

  }
}

  

  @media (max-width: 992px) {
   
    .navigation{
      display: block;
    }
    .mobileProjectTitle{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border:0px solid red;
      height: 110px;
      font-size: 20px;
      color:black;
      font-size: 50px;
      margin: 100px 0px 200px ;
      padding-left: 100px;
    }
    .mobileAlwaysText{
      font-size: 15px;
    }
    .mobilehelp{
      color:#0084ff;
    }
    .mobileHappyText{
      margin-top: 5px;
      font-size: 35px;
    }
    .mobileEmail{
      font-size: 15px;
      border-bottom: 0.5px solid black;
    }
    .mobileAddress{
      color:grey;
      font-weight: 500;
    }
    .mobilePolicy{
      font-weight: 100;
      color: grey;
    }
    .socials{
      border:0px solid red;
      width: 100%;
      justify-content: space-around;
    }
    .contactus{
      border-radius: 20px;
      height: 50px;
      outline: none;
      color:white;
      border:0;
      background-color: #0084ff;
    }
    .mobileFooterOne{
    height: 300px;
    border:0px solid red;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    color:black;

    }
    .mobileFooterTwo{
      height: 300px;
      border:0px solid red;
      width: 100%;
      display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:black;

      }
      .mobileFooterThree{
        height: 100px;
        border:0px solid red;
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        
        }
        .mobileFooterFour{
          height: 100px;
          border:0px solid red;
          width: 60%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: center;
          }
        
        
    .home_about{
      display: none !important;
    }
    .mobileFooter{
      display: flex;
      flex-direction: column;
      border:0px solid red;
      margin-top: 100px;
   align-items: center;
    }
    .mobileTitle{
display: flex;
justify-content: center;
align-items: center;
border: 0px solid red;
font-size: 20px;
margin-top: 120px;
    }
    .how_title{
      font-size: 20px;
    }
    .how_para{
      font-size: 15px;
    }
    .howcard{
      height: 20%;
      width: 60%;
      
    }
    .mobilecards{
      display: flex;
      flex-direction: column;
      border:0px solid red;
      height: 100vh;
      align-items: center;
      justify-content: space-between;
      margin-top: 100px;
    }
    .left-nav{
      display: none;
    }
    .mobileskills{
      display: none;
     

    }
    #movableElement{
      border:0px solid red !important;
      width:85vw;
      height: 500px ;
      position: relative;
      overflow: hidden;
    }
    .threeDText{
      font-size: 25px;
    }
    .p1{
      left:30%
    }
    .p2{
      left:30%
    }
    .p5{
left:5%
    }
    .p7{
      left:5%

    }
    .p3{
left:-10%
    }
    .p4{
right:-15%
    }
    .p6{
right: 0%;
    }
    .p8{
      right: 0%;

    }
    .mobile_project_container{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .mobile_project_item{
      display: flex;
      align-items: center;
      border: 0px solid red;
      flex-direction: column;
    
    }
    .mobile_project_title{
      color:black;
      margin-bottom: 100px;
      font-size: 40px;

    }
    .item_title{
      color:black;
      font-size: 30px;

    }
    .item_title_top{
margin-top: 40px;
margin-bottom: 20px;
    }
    .item_title_bottom{
      margin-bottom: 50px;
    }
    .item_view_more{
      color:black;
      border:1px solid grey;
      border-radius: 30px;
      height:50px;
      width: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      margin-bottom: 120px;
      cursor: pointer;
    }
    .item_image{
      background-image: url(./assets/myghpaybgxx.jpg); 
	background-size: cover;
	background-repeat: no-repeat;
  width: 70vw;
  height: 34vh;
  border-radius: 20px;
    }
    .item_image2{
background-image: url(./assets/tickethome.png); 

    }
    .item_image3{
      background-image: url(./assets/natoursbgpro.jpg); 

      
          }
          .item_image4{
            background-image: url(./assets/3dshirtbg.jpg); 
            
                }
                .item_image5{
                  background-image: url(./assets/trillo.jpg); 
                  
                      }
    .mobile_projects{
      display: flex;
      border: 0px solid red;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin-top: 100px;

    }
    .mobile_who{
      display: flex;
      flex-direction: column;
      margin-top: 80px;
      align-items: center;
      height: 30vh;
      border:0px solid red;
     
     
    }
    .minititle{
      color: grey;
      font-size: 25px;
      font-weight: 100;
      margin-bottom: 50px;
      border: 0px solid red;
    }
    .minidesc{
      font-size: 29px;
      font-weight: 400;
border: 0px solid red;
margin-top: 15px;
    }

    .nav{
      border: 0px solid red;
      padding: 0;
    }
    .left-nav{
      border: 0px solid red;
      width: 70%;
    }
    .title_2_container{
      border: 0px solid red;
      width: 100vw;
      height: 100px;
      display: flex;
      justify-content: space-between;
      margin-top: -550px;

    }
      .title_2 {
        padding: 0px !important;
        border: 0px solid red;
        text-align: center;
        letter-spacing: 1px;
          font-size: 35px; /* Smaller font size for mobile */
          /* Adjust other styles as needed for mobile */
      display: none;

      }
      .title_2b{
        margin-top: 10px;
        width: 100%;
      display: none;

    }
    .scene {
      height: 50vh;
      width: 100vw;
      top:50px;
    left:0%;
    }
    .learn_button{
  margin-top: -170px;
    }
    .title_2_mob{
      display: inline-block;
      font-size: 35px;
    }
    .projects{
      display: none;
    }

.navigation__checkbox {
  display: none; }

.navigation__button {
  background-color: #fff;
  height: 4rem;
  width: 4rem;
  position: fixed;
  top: 1rem;
  right: 1rem;
  border-radius: 50%;
  z-index: 2000;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer; }

.navigation__background {
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  background-image: radial-gradient(#ebebeb, #dddddd);
  z-index: 1000;
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1); }

.navigation__nav {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1000000;
  opacity: 0;
  width: 0;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.navigation__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%;
  border:0px solid red;
}

.navigation__item {
  margin: 1rem;
}

.navigation__link:link, .navigation__link:visited {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: grey;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
  background-size: 220%;
  transition: all .4s; }
  .navigation__link:link span, .navigation__link:visited span {
    margin-right: 1.5rem;
    display: inline-block; }

.navigation__link:hover, .navigation__link:active {
  background-position: 100%;
  color: black;
  transform: translateX(1rem); }

.navigation__checkbox:checked ~ .navigation__background {
  transform: scale(80); }

.navigation__checkbox:checked ~ .navigation__nav {
  opacity: 1;
  width: 100%;
z-index: 1500;
}
 

.navigation__icon {
  position: relative;
  margin-top: 2rem;

}
  .navigation__icon, .navigation__icon::before, .navigation__icon::after {
    width: 2rem;
    height: 2px;
    background-color: #333;
    display: inline-block; }
  .navigation__icon::before, .navigation__icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all .2s; }
  .navigation__icon::before {
    top: -.5rem; }
  .navigation__icon::after {
    top: .5rem; }

.navigation__button:hover .navigation__icon::before {
  top: -.5rem; }

.navigation__button:hover .navigation__icon::after {
  top: .5rem; }

.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent; }

.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  top: 0;
  transform: rotate(135deg); }

.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  top: 0;
  transform: rotate(-135deg); }
    }


  @media (max-width: 768px) {
    .mobileProjectTitle{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border:0px solid red;
      height: 110px;
      font-size: 20px;
      color:black;
      font-size: 40px;
      margin: 100px 0px ;
      padding-left: 0px;

    }
    .mobileAlwaysText{
      font-size: 15px;
    }
    .mobilehelp{
      color:#0084ff;
    }
    .mobileHappyText{
      margin-top: 5px;
      font-size: 35px;
    }
    .mobileEmail{
      font-size: 15px;
      border-bottom: 0.5px solid black;
    }
    .mobileAddress{
      color:grey;
      font-weight: 500;
    }
    .mobilePolicy{
      font-weight: 100;
      color: grey;
    }
    .socials{
      border:0px solid red;
      width: 100%;
      justify-content: space-around;
    }
    .contactus{
      border-radius: 20px;
      height: 50px;
      outline: none;
      color:white;
      border:0;
      background-color: #0084ff;
    }
    .mobileFooterOne{
    height: 300px;
    border:0px solid red;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    color:black;

    }
    .mobileFooterTwo{
      height: 300px;
      border:0px solid red;
      width: 100%;
      display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:black;

      }
      .mobileFooterThree{
        height: 100px;
        border:0px solid red;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        
        }
        .mobileFooterFour{
          height: 100px;
          border:0px solid red;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: center;
          }
        
        
    .home_about{
      display: none !important;
    }
    .mobileFooter{
      display: flex;
      flex-direction: column;
      border:0px solid red;
      margin-top: 100px;
   height: 80vh;
    }
    .mobileTitle{
display: flex;
justify-content: center;
align-items: center;
border: 0px solid red;
font-size: 20px;
margin-top: 120px;
    }
    .how_title{
      font-size: 20px;
    }
    .how_para{
      font-size: 15px;
    }
    .howcard{
      height: 20%;
      width: 90%;
    }
    .mobilecards{
      display: flex;
      flex-direction: column;
      border:0px solid red;
      height: 100vh;
      align-items: center;
      justify-content: space-between;
      margin-top: 100px;
    }
    .left-nav{
      display: none;
    }
    .mobileskills{
      display: block;
     

    }
    #movableElement{
      border:0px solid red !important;
      width:85vw;
      height: 500px ;
      position: relative;
      overflow: hidden;
    }
    .threeDText{
      font-size: 25px;
    }
    .p1{
      left:30%
    }
    .p2{
      left:30%
    }
    .p5{
left:5%
    }
    .p7{
      left:5%

    }
    .p3{
left:-10%
    }
    .p4{
right:-15%
    }
    .p6{
right: 0%;
    }
    .p8{
      right: 0%;

    }
    .mobile_project_container{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .mobile_project_item{
      display: flex;
      align-items: center;
      border: 0px solid red;
      flex-direction: column;
    
    }
    .mobile_project_title{
      color:black;
      margin-bottom: 100px;
      font-size: 40px;

    }
    .item_title{
      color:black;
      font-size: 30px;

    }
    .item_title_top{
margin-top: 40px;
margin-bottom: 20px;
    }
    .item_title_bottom{
      margin-bottom: 50px;
    }
    .item_view_more{
      color:black;
      border:1px solid grey;
      border-radius: 30px;
      height:50px;
      width: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      margin-bottom: 120px;
    }
    .item_image{
      background-image: url(./assets/myghpaybgxx.jpg); 
	background-size: cover;
	background-repeat: no-repeat;
  width: 90vw;
  height: 34vh;
  border-radius: 20px;
    }
    .item_image2{
background-image: url(./assets/tickethome.png); 

    }
    .item_image3{
      background-image: url(./assets/natoursbgpro.jpg); 

      
          }
          .item_image4{
            background-image: url(./assets/3dshirtbg.jpg); 
            
                }
                .item_image5{
                  background-image: url(./assets/trillo.jpg); 
                  
                      }
    .mobile_projects{
      display: flex;
      border: 0px solid red;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin-top: 100px;

    }
    .mobile_who{
      display: flex;
      flex-direction: column;
      margin-top: 80px;
      align-items: flex-start;
      height: 40vh;
      border:0px solid red;
     
     
    }
    .minititle{
      color: grey;
      font-size: 25px;
      font-weight: 100;
      margin-bottom: 50px;
    }
    .minidesc{
      font-size: 26px;
      font-weight: 400;
border: 0px solid red;
margin-top: 15px;
    }

    .nav{
      border: 0px solid red;
      padding: 0;
    }
    .left-nav{
      border: 0px solid red;
      width: 70%;
    }
    .title_2_container{
      border: 0px solid red;
      width: 100vw;
      height: 100px;
      display: flex;
      justify-content: space-between;
      margin-top: -550px;

    }
      .title_2 {
        padding: 0px !important;
        border: 0px solid red;
        text-align: center;
        letter-spacing: 1px;
          font-size: 35px; /* Smaller font size for mobile */
          /* Adjust other styles as needed for mobile */
      display: none;

      }
      .title_2b{
        margin-top: 10px;
        width: 100%;
      display: none;

    }
    .scene {
      height: 50vh;
      width: 100vw;
      top:50px;
    left:0%;
    }
    .learn_button{
  margin-top: -170px;
    }
    .title_2_mob{
      display: inline-block;
      font-size: 35px;
    }
    .projects{
      display: none;
    }
    }