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



            .col01{
              width: 33.33%;
              float: right;

            }




            #heading2{

              font-size: 32px;
              margin-top: -30px;
              text-align: center;
            }
            .col02{
              width: 33.33%;
              float: left;

            }
            .col03{
              width: 33.33%;
              margin: 0 auto;
       
            }


                #column {
                  float: left;
                  width: 22%;
                  padding: 50px;
       
                  
                }

                #cl1{   
                  float: left;
                  width: 15%;
                 margin-left: 186px;
                 margin-top: -182px;

              
                 }
                 #cl2{   
                  float: left;
                  width: 15%;
                 margin-left: 300px;
                  margin-top: -182px;
              
                 }
                 #cl4{   
                  float: left;
                  width: 15%;
                 margin-left: 420px;
                  margin-top: -182px;
              
                 }

                 #icon23{
                  margin-left: 80px;
                 }



                #cl3{   
                  float: left;
                  width: 15%;
                  margin-top: -49px;
             

                 }
                #row:after {
                  content: "";
                  display: table;
                  clear: both;
                }

                 #icon42{margin-left: 105px;
                  }

                  #icon233{
                    margin-left: 3px;
                  }
                   #icon23{
                    margin-left: 83px;
                  }



          .column1 {
              float: left;
              width: 40%;
              padding: 5px;
              margin-left: 89px;

            }



  .column00{
              float: left;
              width: 45%;
              margin-left: 610px;
             align-content: left;
             margin-top: -120px;
            }

             .column00 p, .column1 p {
              font-size: 17px;
            }

              .column00 h4, .column1 h4 {
              font-size: 20px;
              font-weight: 900;
            }

            .space{
              margin-left: 103px;
            }


       
            .row1::after {
              content: "";
              clear: both;
              display: table;
            }

                .box{
                  align-content: center;
                  text-align: center;
                }

          .cont1{

            background:#EDEDED ;
            height: 570px;
            width: 100%;
            background-size:cover;
            position: relative;
            

                      }


                  .cv{
                     width: 600px;
                      border: 1px solid #BEBEBE;
                      padding: 50px;
              
                      background-color:#FFFFFF ;
                      height: 160px;
                      border-radius: 10px;
                      justify-content: center;
                      border-color:#BEBEBE ;
                      margin: auto;

                  }

.br{
margin-top: -45px;
border-style: outset;

}
#input-name{
  margin-left:180px;
  border-color:#BEBEBE ;
}

#input_lname{
  margin-left: -20px;
  border-color:#BEBEBE ;
}

#input-email{
    margin-left:180px;
  border-color:#BEBEBE ;
}

#input-phone{
  margin-left: -20px;
  border-color:#BEBEBE ;
}

.size{

  font-size: 17px;

}

.#one{
margin-top: -29px;


}

.skills__close .skills__list{
    height: 0;
    overflow: hidden;
}

.skills__open .skills__list{
    height: max-content;
    margin-bottom: var(--mb-2-5);
}

/*.skills__open{
    transform: rotate(180deg);

}
*/

.skills__list{
    row-gap: 1.5rem;
    /*padding-left: 2.7rem;*/
}

.skills__titles{
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--mb-0-5);
}

/*.skills__container{position: relative;}*/


.skills__header{
   /* display: flex;*/
 /*  display: inline;
*/
    cursor: pointer;

    
    
}


.skills__header2{
   /* display: flex;*/
 /*  display: inline;
*/
    cursor: pointer;
   /* margin-left: 120px;
    margin-top: -399px;
     position: absolute;*/
    
    
}


.skills__header3{
   /* display: flex;*/
 /*  display: inline;
*/
    cursor: pointer;
   /* margin-left: 240px;
    margin-top: -2px;
    
     position: absolute;
    */
}



.skills__header4{
   /* display: flex;*/
 /*  display: inline;
*/
    cursor: pointer;
 
/*    margin-top: -2px;
    
     position: absolute;
     margin-left: 400px;*/
    
}

.skills__titles{
    display: flex;
    justify-content: space-between;
  /*  margin-bottom: var(--mb-0-5);*/
}






.skills__title{
 
    justify-content: space-between;
    

}

.skills__title1{
 
    justify-content: space-between;
    margin-bottom: 8px;
    margin-left: -121px;

}


.skills__title2{
 
    justify-content: space-between;
    margin-bottom: 8px;
    margin-left: -230px;

}

.skills__title3{
 
    justify-content: space-between;
    margin-bottom: 8px;
    margin-left: -360px;

}




.dro {
  height: 20vh;
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/*.proj,
.prod, .ro,.pm{
  position: relative;
}*/

.proj ul,
.prod ul 
,.ro ul,.pm ul{
  margin-top: 70px;
  position: absolute;
  display: flex;
  justify-content: space-around;
  flex-direction: column;

  width: 810px;
  height: 200px;
  background: white;
  left: 0px;
  list-style: none;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.4s ease;
}
.proj li,
.prod li ,.ro li,.pm li


{
  width: 810px;
  height: 100%;
  display: flex;
 

}


#bt22{
  margin-left: 40px;

}

#bt33{
    margin-left: 40px;
  
}
#bt44{
    margin-left: 40px;
  
}

.btn-success1 {
  color: black;
  border: none;
  background-color: white;
 
}



.btn-success1:hover {
  color: #c4950b;
  border-bottom: 3px solid #c4950b;
  border-bottom-color: #c4950b;
}

.btn-success1:focus, .btn-success1.focus {
   color: #c4950b;
  border-bottom: 3px solid #c4950b;
  border-bottom-color: #c4950b;
}



      #app{
                float: right;
                margin-right: 99px;
                 margin-top: -60px;
                 font-size: 10px; 
                   color: #c4950b;
              
            
            
              }
#app:hover{
  color: #fff;
  outline: none;
  border-color: #c4950b;
  background: #c4950b;
}

 #app:focus,  #app.focus {
     float: right;
                margin-right: 99px;
                 margin-top: -60px;
                 font-size: 10px; 
                   color: #c4950b;
                   background-color: white;
}





/*.proj a,
.prod a ,.ro a, .pm a{

}*/

.dro button
{
  background-color: white;
  text-decoration: none;
  border: none;
  background: none;
 
  cursor: pointer;
}

.proj button:focus + ul,
.prod button:focus + ul,
.ro button:focus + ul,
.pm button:focus + ul

 {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0px);
}

/*#des{
  margin-top: 360px;
  margin-right: -80px;
}*/
/*
#bt11{
  margin-left: -290px;
  position: relative;
}*/


#title{
  margin-left: 70px;
}

.description{
  margin-left: 70px;
}

.postbtn{
  margin-left: 70px;
}


  #icon1{margin-left: 115px;

                }


   #icon11{
                margin-left: 115px;
                

                }


  #icon3{margin-left: 115px;


                }


   #icon33{
                margin-left: 115px;
                

                }




  #icon2{margin-left: 87px;

                }


   #icon22{
                margin-left: 90px;
                

                }
  #icon4{margin-left: 106px;
                }

                #icon44{
                    margin-left: 106px;

                }



[class*="col-"] {
  width: 100%;
}

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

html { font-size:100%; } 

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} } 

@media screen and (max-width: 767px) {
  * {
              box-sizing: border-box;
            }


            .col01{
              width: 33.33%;
              float: right;



            }
            .col02{
              width: 33.33%;
              float: left;

            }
            .col03{
              width: 33.33%;
              margin: 0 auto;
       
            }
#head4{
  margin-right: 30px;
}

/*#icon1, #icon12{

  margin-left: 1px;
}
*/

           
                #column {
                  float: left;
                  width: 22%;
                  padding: 50px;
                  margin-left: -20px;
       
                  
                }


#icon1{
  margin-top: 80px;
  margin-left: -30px;
}
#icon11{
 
  margin-left: -30px;
}



#icon2{
  margin-top: 80px;
  margin-left: -30px;
/*  margin-right:-70px ;*/
}

#icon22{
  
  margin-left: -30px;
/*  margin-right:-70px ;*/
}


                #icon3 {
                  margin-left: -30px;
                  margin-top: 80px;
                }


                #icon33{
                    margin-left: -30px;

                }

          

                #icon4{margin-left: -26px;
                  margin-top: 80px;}

                   #icon44{
                 
               margin-left: -26px;
                  }

               

                  #cl1{   
                  float: left;
                  width: 100%;
                 margin-left: 35px;
                 margin-top: -90px;
              
                 }
                 #cl2{   
                  float: left;
                  width: 100%;
                 margin-left: 34px;
                     margin-top: -45px;
              
                 }
                 #cl4{   
                  float: left;
                  width: 100%;
                 margin-left: 34px;
              
                 }
/*
                 .description{margin-right: -130px;}

                 #title{margin-right: 130px;}*/


                #cl3{   
                  float: left;
                  width: 30%;
                  margin-top: -49px;
             

                 }

                #row:after {
                  content: "";
                  display: table;
                  clear: both;
                }

          .column1 {
              float: left;
              width: 100%;
              padding: 5px;

            }

            #hd1{
              margin-left: 5px;



            }


  .column00{
              float: left;
                 width: 100%;
              margin-left: 5px;
             align-content: left;
             margin-top: 20px;
            }
#main1{    float: left;
                 width: 100%;
              margin-left: 5px;
             align-content: left;}
       
            .row1::after {
              content: "";
              clear: both;
              display: table;
            }

                .box{
                  align-content: center;
                  text-align: center;
                }

          .cont1{

            background:#EDEDED ;
            height: 770px;
            width: 100%;
            background-size:cover;
            position: relative;
            

                      }


                  .cv{

                    min-width: 310px;
                     width: 350px;
                      border: 1px solid #BEBEBE;
                      padding: 50px;
              
                      background-color:#FFFFFF ;
                      height: 170px;
                      border-radius: 10px;
                      justify-content: center;
                      border-color:#BEBEBE ;
                      margin: auto;
                      margin-left: -20px;

                   

                  }

.br{
margin-top: -45px;
border-style: outset;

}
#input-name{
  margin-left:-20px;
  border-color:#BEBEBE ;

}

#input_lname{
  margin-left: -20px;
  border-color:#BEBEBE ;
}

#input-email{
    margin-left:-20px;
  border-color:#BEBEBE ;
}

#input-phone{
  margin-left: -20px;
  border-color:#BEBEBE ;
}

.size{

  font-size: 17px;

}

.#one{
margin-top: -29px;

}

#app{
  
  margin-right: -320px;
  margin-top: -60px;
}

.dro {
  height: 20vh;
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.proj,
.prod, .ro,.pm{
  position: relative;
}

.proj ul,
.prod ul 
,.ro ul,.pm ul{
  margin-top: 70px;
  position: absolute;
  display: flex;
  justify-content: space-around;
  flex-direction: column;

  width: 810px;
  height: 200px;
  background: white;
  left: 0px;
  list-style: none;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.4s ease;
}
.proj li,
.prod li ,.ro li,.pm li


{
  width: 810px;
  height: 100%;
  display: flex;
 

}


.dro button
{
  background-color: white;
  text-decoration: none;
  border: none;
  background: none;
 
  cursor: pointer;
}


.proj button
{
 margin-left: 440px;
}

.prod button{
  margin-left: 50px;
}

.ro button{
  margin-top: 120px;
  margin-left: -190px;
}

.pm{margin-top: 120px;
  margin-left: -60px;}

.proj button:focus + ul,
.prod button:focus + ul,
.ro button:focus + ul,
.pm button:focus + ul

 {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0px);
}



#app{
                float: right;
                margin-right:8px;
                 margin-top: -60px;
                 font-size: 10px; 
                   color: #c4950b;
                   
            
            
              }

              hr{
                margin-left: 50px;
              }
#app:hover{
  color: #fff;
  outline: none;
  border-color: #c4950b;
  background: #c4950b;
}

.skills__title{
 
    justify-content: space-between;
    margin-bottom: 8px;
    margin-left: -60px;

}

#bt11{
  margin-left: 15px;

}

#bt22{
  margin-left: 40px;

}

#bt33{
    margin-left: 18px;
  
}
#bt44{
    margin-left: 20px;
  
}



.skills__title1{
 
    justify-content: space-between;
    margin-bottom: 8px;
    margin-left: -130px;

}


.skills__title2{
 
    justify-content: space-between;
    margin-bottom: 8px;
    margin-left: -230px;

}

.skills__title3{
 
    justify-content: space-between;
    margin-bottom: 8px;
    margin-left: -160px;

}