@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=Petit+Formal+Script&family=Pinyon+Script&display=swap');


html {
    scroll-behavior: smooth;
  }
body{
    background: linear-gradient(95.09deg, #0b083a -11.33%, rgba(207, 39, 230, 0.95) 154.85%);
    
    background-image:url("jo1.jpg");
        object-fit: cover;
        background-size: cover;
       
        margin: auto;
        overflow-y: scroll;
        position: relative;
        

}

.image_shower{
    position: absolute;

 
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    

    z-index: 100;
}

.image_shower img {
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    width:85%;
    overflow-y: scroll;

}

.image_shower video {
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    width:85%;
    overflow-y: scroll;

}



.hide_img{
    display: none;
    
}


body{
    font-family: "Montserrat";
    overflow-y: auto;
}
    .wrapper{
        width:95vw;
        
        
        height: auto;
        
        background-image:url("jo1.png");
        object-fit: cover;
        background-size: cover;
        margin: auto;
        display: flex;
        flex-direction: column;
        
        overflow-x: hidden;
        
        scroll-behavior: smooth;
        
        position: relative;
        
        
    
    
    }

   /* ::-webkit-scrollbar {
        -webkit-appearance: none;
    
      }*/
    .header{

    
        width:95%;
        
        max-height: 300px;
        height:5vw;
        position: fixed;
        z-index: 4;
        background: linear-gradient(269.58deg, #152651 18.23%, rgba(81, 21, 76, 0.8) 111.71%);
        display: flex;
        justify-content: space-between;
        align-items: center;
    
    
    }

    .header ul  {
        width:auto;
        height: auto;
        display: flex;
        gap:2vw;
        margin-right: 3vw;
        align-items: center;
        
    
    }
    li{
        text-decoration: none;
        list-style-type: none;
    }
    li  a {
        text-decoration: none;
    
        font-size: 1vw;
        color: rgb(255, 255, 255);
        list-style-type: none;
    }

    .logo{
        
        color:white;
        font-style: normal;
        font-weight: 200;
        margin-left: 2vw;
    }

    .logo p{
        font-family: 'Petit Formal Script', cursive;
        font-size: 1vw;
        
    }
    a{
        color:white;
        text-decoration: none;
        font-family: "Montserrat";
        transition: 1s ease;
    }

    a:active{
        color:rgb(0, 255, 213);
        font-weight: 800;
        font-size: 2vw;
    }

    a:hover{
        transition:unset;
        color:unset;
        color:rgb(0, 255, 213);
        font-weight: 600;
        font-size: 1.5vw;
    }

    .main_head{
        margin-top:8vw;
        width:100%;
        height:auto;
        display: flex;
        justify-content: space-evenly;
    
    }

    .left{
        width:50%;
        height: auto;

    }


    .left  h1{
        all:unset;
        line-height: 10vw;
        color:orange;
        font-weight: 700;
        font-size: 13vw;
       

        
    
        

    }
    .left .first p{
        all:unset;
        color:rgb(255, 255, 255);
        font-weight: 400;
        font-size: 5vw;
    }
    #ux{
        height: auto;
        font-size: 10vw;
    
    
    }
    #developer{
    
        all:unset;
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 700;
        font-size: 4vw;
      




        color: #FFFFFF;

    }

    .left p {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 1.4vw;
      
        
        color:white;
    
    }

    .left button{
        font-family: "Montserrat";
        font-weight: 400;
        height: 4vw;
       width: 15vw;
        border: none;
        font-size: 1.5vw ;

        text-align: center;
    color:white;
    background: linear-gradient(95.09deg, #61FDF4 -11.33%, rgba(109, 159, 255, 0) 154.85%);
 
    background: linear-gradient(95.09deg, #E94AA0 -11.33%, #1C41FF 154.85%);

    /*

    background: linear-gradient(95.09deg, #E94AA0 -11.33%, #1C41FF 154.85%);
    */

    box-shadow: 0px 9px 32px rgba(0, 0, 0, 0.13);
            
            }
            

    .las   {
        margin-left:10% ;
    }
    .right {
    
        border-radius: 1px solid blue;
        width:40%;
        
    }

    .right img{
        width: 100%;
        border-radius: 20vw 20vw 0px 0px;
    }







    .about_me{
        margin: auto;
    
        width: 95%;
        display: flex;
        justify-content: space-around;
        flex-direction: row-reverse;
        gap:3vw;
        margin-top:5%;
    
    
    }


    .about_me button{
        font-family: "Montserrat";
        font-weight: 400;
    padding: 4% ;
        border: none;
        font-size: 1.5vw ;
        text-align: center;
    color:white;
    background: linear-gradient(95.09deg, #3ba09b -11.33%, rgba(109, 159, 255, 0) 154.85%);
    background: linear-gradient(95.09deg, #E94AA0 -11.33%, #1C41FF 154.85%);
        margin-top:2%;
}

    .abt_img:nth-child(1){
        border-radius: 6000px;
    }

    .ab_left img{
        display: none;
    }




    .ab_left{
        width:60%;
    
        
    }
    .ab_right{
        all: unset;
        width:40%;
        height: 40%;
    
    
        
        
    }
    .ab_right img{
        all: unset;
        width: 100%;
        
        border-radius: 20px;
    
    }

    .info{
        width:100%;
        height:55%;
        background-color: #152651;
        box-shadow: 0px 3px 150px rgba(75, 190, 255, 0.25);
    }

    #ab_me{
    
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 7vw;
    line-height: 30%;
    color: #FFFFFF;
    position: relative;
    
    }

    #ab_me:nth-child(2)::after{
        content: "";
        position: absolute;
        bottom:-4vw;
        height: 2vw;
        width:30%;
        left:0;
        background-color: #FFFFFF;
    }
    
 

    .ab_info p{
        color: white;
        font-size: 2vw;
        font-family: 0;
    }

    .ux_ui{
    
        width:95%;
        margin: 5% auto auto auto;
        
        position: relative;
    }

    .all_grid h1{
        all:unset;
        font-family: "Montserrat";
        color: white;
        font-size: 5vw;
        font-weight: 1000;
        margin-top:5vw;
    }

    .ux_ui ol {
        all:unset;
        color: white;
        width: 80%;
        display: flex;
        flex-direction: row;
        font-size: 2vw;
        align-items: flex-start;
        flex-wrap: wrap;
   
       
        height: auto;
        gap:2.3vw;

    }
    .ux_ui ol li {
        
        font-size: "Monserrat";
       
        
        width: auto;
        
    }

    .ux_ui ol li::before {
        content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
        color: rgb(255, 217, 1); /* Change the color */
        font-weight: bold; /* If you want it to be bold */
        display: inline-block; /* Needed to add space between the bullet and the text */
        width: 2vw; /* Also needed for space (tweak if needed) */
        margin-left: 1vw; 
    }



        
    .ux_heading{
        all:unset;
        width:100%;
        display: flex;
    flex-direction: column;            
    }

    .ux_heading h1{
        all:unset;
        
    
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 700;
        font-size: 15vw;
        
        background: linear-gradient(112.26deg, #9FE8FF 6.3%, #EC60CD 25.9%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
            
        
        text-align: left;
    }

    .ux_heading p{
        all:unset;
        width:70%;
        
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 300;
        font-size: 2.1vw;
        text-align: left;
    
        color: #FFFFFF;
    }

.all_grid{
    margin-top:3%;
    width:100%;
    display: flex;
    flex-direction: column;
    gap:2vw;
}



.full_some{
    width: 100%;
}

.full_some video{
    width:100%;
    height: 100%;
    object-fit: cover;
}

.work img{
    
    width:100%;
    height: 100%;
    object-fit: cover;
    

}



.grid_2{
   
    
    height: 100vw;
 
    width:100%;
    display: grid;
  

    grid-template-areas: 
    "one one one one"
    "one one one one"
    "two two three three"
    "two two four four"
    ;

    gap: 2vw;
 
}

.grid_2 div{

    border-radius: 2vw;
    overflow: hidden;
    box-shadow: 0px 7px 46px -13px rgba(16, 16, 16, 0.79);

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

.grid_2 video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid_2 .item_1 {
  grid-area: one;
    
  }
  
 .grid_2 .item_2 {
    grid-area: two;
  }

  .grid_2 .item_3 {
    grid-area: three;

  }

  .grid_2 .item_4 {
    grid-area: four;

  }



.contact{
    margin-top: 9vw;
    width:100%;

    
    width: 100%;
   
    display: flex;
    height: auto;
}


.contact_left{
    width: 50%;
    height: 100%;
    background-color: #4249E3;
    padding: 1vw;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left:4vw;
}

.reach{


   
    width:60%;
}
.reach .info{
    all:unset;
    color:white;
    display: flex;
    align-items: center;
    gap:1vw;

    
    width: 100%;
    font-weight: 500;
    

    color: #FFFFFF;

}   
.reach .info a:hover{
    transition:unset;
    transition:1s ease;
    font-size: 1.5vw;
}

.contact .contact_right{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    
    padding: 1vw;
    
}

.contact_left h1{
    all:unset;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-size: 5vw;
    color: #FFFFFF;

  

}

.contact_left p, i{
    font-size: 2vw;
    font-family: 100;
}

.inputbox{
    width:100%;
    
    display: flex;
    flex-direction: column;
    gap:10px;
}

.inputbox label{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    font-size: 1.4vw;
    color:white;
}
.inputbox input, select, option{

    border: none;
    background: linear-gradient(268.05deg, rgba(255, 72, 83, 0.5) -4.92%, rgba(63, 15, 255, 0.6) 121.81%);
    
    border-radius: 3vw;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 2vw;
    height:5vw;
    padding-left: 1vw;
    
    color:white;
}

.inputbox input:focus{
    border: 1px solid white;
    background-color: transparent;
}

#txtarea{
    background-color: transparent;
   border: 1px solid white;
   height: 9vw;
   border-radius: 1vw;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   font-size: 2vw;
   padding: 0.5vw;
   color:white;
   
}

.contact_right button{
    margin-top: 3%;
    padding:2vw;
    border: none;
    background: linear-gradient(95.09deg, #1D85FF 0.09%, rgba(255, 75, 119, 0) 128.13%);
    
  
    filter: drop-shadow(-13px 7px 104px #4870FF);
    border-radius: 1vw;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 1vw;

    color: #FFFFFF;

    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);

}



.bottom{
    width:100%;
    margin-top:5vw;
    height: 12vw;
    background-color: #0b083a;
    text-align: center;
    color:white;
    font-weight: 400;


    padding: auto;
   
}

.bottom p{
  
    font-size: 2vw;
}


  
  @media(max-width:500px){

    a:hover{
        all: unset;
     color:rgb(0, 255, 213);;
     font-weight: 600;
    }

    a:active{
        color:rgb(0, 255, 213);;
        font-size: 2vw;
    }

    .wrapper{
        width: 100vw;
        overflow: hidden;
    }
    
    .header{
        position: fixed;
     
        flex-direction: column;
        justify-content: space-around;
        width: 100%;
        gap:2vw;
        align-items: center;
        height: 12vw;
        padding:0;
        z-index: 10;
        
    }

    .header ul{
        width:80%;
        margin-left: unset;
        margin: auto;
       padding:unset;
        height: 70%;
       
       
        justify-content: space-evenly;

    }
    .logo{
   
        
        
        padding: unset;;
        width: 100%;
        height: 30%;
        
    
      
      
   
    }

    .logo p {
        margin:unset;
        font-family: 'Petit Formal Script', cursive;
        text-align: center;
        
        font-size: 2vw;
        color: rgb(255, 255, 255);
        height: 100%;
    }

    li {
        all:unset;
      
        height: fit-content;
    }   

    li a{
        width: fit-content;
        font-size: 2vw;
        
      
    }

    .main_head{
        flex-direction: column-reverse;
        align-items: center;
    }

    .left{
        width: 80%;
        text-align: center;
    }



    .las{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin-left: unset;

     
    }

    .right{
        width: 40%;
        margin: auto;
    }
    .left button{

        height: 8vw;
        width: 30vw;
        border: none;
        font-size: 3vw ;
      
            
            }

    #developer{
        font-size: 10vw;
    }








    .about_me{
        flex-direction: column;
        align-items: center;
        
    }

    .ab_left img{
        display: flex;
        width: 80%;
        border-radius: 100vw;
        border: 2px solid  linear-gradient(95.09deg, #61FDF4 -11.33%, rgba(109, 159, 255, 0) 154.85%);;
    }

    .ab_right img{
        display: none;
    }


    .ab_left{
        width: 80%;
   
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
       
    }

    .ux_heading p{
        font-size: 3vw;
    }





    .ux_ui ol {
    
        color: white;

        width: 80%;
        display: flex;
        flex-direction: column;
        font-size: 3vw;
        align-items: center;
        text-align: center;
        justify-content: space-evenly;
        
       
    
        gap:2.3vw;

    }

    .las p{
        font-size: 3vw;
    }

    .about_me  p{
        
        font-size: 3vw;
      
    }

    .ux_ui{
        margin: 1% auto auto auto;
    }

    .ux_ui, .ux_heading{
       
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ux_heading p{
        width: 100%;
        text-align: center;
    }

    #ab_me{
 
        font-size: 15vw;
       

    }

    .about_me button{
        padding:5%;
        font-size: 3vw;
    }

    #ab_me:nth-child(2){

        margin-top:-3vw;
    }

    #ab_me:nth-child(2)::after{
        content: "";
        position: absolute;
        bottom:-7vw;
        height: 2vw;
        width:100%;
        left:0;
        background-color: #FFFFFF;
    

    }

    .contact{
        margin: 19vw auto auto auto;
        flex-direction: column-reverse;
        width:90%
        
    }

    .contact_left {
        box-sizing: border-box;
        width:100%;
        height: auto;
    }

    .contact .contact_right{
        width:100%;
    }

    .inputbox label{

        font-size: 3vw;
   
    }

    .inputbox input{
        height: 10vw;;
    }

    .inputbox input{
        font-size: 3vw;
    }

    #txtarea{
        height: 25vw;
        font-size: 3vw;
       
    }

    .contact_left{
        text-align: center;
    }

    .contact_left h1{
        font-size: 10vw;

    }
   
    

    .contact_right button{
        font-size: 2vw;
        border-radius: 2vw;
        padding:4vw;
    }

    .reach{
        width: 100%;
        text-align: center;
      
       
        
    }

    .reach .info{
       
        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-bottom: 2vw solid rgba(0, 0, 0, 0.13);
       
        
    
        
        width: 100%;
        font-weight: 500;
        
    
        color: #FFFFFF;
    
    }   


    select , input{
        height: 10vw;
        font-size: 3vw;
        
    }


    
    

    

  }