#vdd {
   width: 200px;
    height: 200%;
    margin-top: 0px;
    float: right;
}
  /* #im {          
        width:200px;height:100%; margin-top:10px; float:left;
		 } */
		
#im {
    width: 200px;
    height: 200%;
    margin-top: -10px;
    float: left;
}
		
		 #goals {          
         width: 200px;
    height: 200%;
    margin-top: -6px; float:left;
		 }
	
 
 #p1{margin-left:15px;  }
   #p0{margin-left:15px; }
   


/*---=======dep_profile ============--*/
#vd-pro1{margin-top:0px;    margin-left: -92px;
    margin-right: 38px;}
	
#vd-pro2{margin-top:0px;margin-left: -41px;
    margin-right: -22px;}
	
#vd-pro3{margin-top:0px;margin-right: -84px;
    margin-left: 20px;}
/*---=========end==========--*/

.table td,th,tr{
      border:1px solid #000
      }
      .container {
      width: 100%;
      }
      .card{
      box-sizing:border-box; 
      box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px 05px;
      border: ridge;
      }
      .img-adjust{
      padding: 7px 7px 1px;
      }
      .head{
      text-transform: capitalize;
      margin: 0px 0px 10px;
      text-align: center; 
      font-size: 18px; 
      color:red;
      }
      #desi{
      margin: -10px 33.625px 10px 28.0156px;
      text-align: left!important;
      line-height: 2px;
      font-size: 13px;
      color: black;
      }
      .vd {
      box-sizing: border-box;
      background-color: transparent;
      color: rgb(52, 50, 51);
      text-decoration-line: none;
      cursor: pointer;
      display: table;
      margin: -7px auto 5px;
      border: 1px solid rgb(236, 50, 55);
      border-radius: 10px;
      padding: 3px 70px;
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 800;
      transition: all 0.3s ease 0s;
      }
      #title{color:red;}
      .mail{
      box-sizing: border-box; 
      margin: 0px 0px 0px; 
      text-align: center; 
      font-size: 13.4px; 
      color: white; 
      background-color: rgb(236, 50, 55); 
      height: 25px; 
      width: auto;
      }
      #im2 {
      border: double;
      border-radius: 100px;
      width: 100px;
      height: 100px;
      }
      #im4 {
      border: double;
      border-radius: 100px;
      width: 100px;
      height: 86px;
      }
      #im3 {
      border: double;
      border-radius: 100px;
      width: 45px;
      height: 40px;
      margin-top: 25px;
      }
      .col-md-3{
      position: relative;
      min-height: 1px;
      padding-right: 8px;
      padding-left: 10px;
      }
      .title-border {
      width: 100%;
      height: 1px;
      margin: 2px auto 10px;
      background-color: #000;
      display: block;
      margin-top:90px!important;
      margin-bottom: 5px!important;
      }
      #tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 0px dotted black;
      }
      #tooltip #tooltiptext {
      visibility: hidden;
      margin-top: 0px;
      margin-left: -60px;
      width: 122px;
      background-color: transparent;
      color: #000;
      text-align: center;
      border-radius: 6px;
      padding: 2px 1px;
      position: absolute;
      z-index: 1;
      }
      #tooltip:hover #tooltiptext {
      visibility: visible;
      }
      #tooltip1 {
      position: relative;
      display: inline-block;
      border-bottom: 0px dotted black;
      }
      #tooltip1 #tooltiptext1 {
      visibility: hidden;
      margin-top: 0px;
      margin-left: -60px;
      width: 122px;
      background-color: transparent;
      color: #000;
      text-align: center;
      border-radius: 6px;
      padding: 2px 1px;
      position: absolute;
      z-index: 1;
      }
      #tooltip1:hover #tooltiptext1 {
      visibility: visible;
      }
      /*---------------------*/
      main {
      max-width: 100%;
      margin: 0 auto;
      }
      summary {
      font-size: 13px;
      font-weight: 600;
      background-color: #fafafa;
      background-image: 
      radial-gradient(at 75% 99%, rgba(243, 243, 243, 0.04) 0%, rgba(243, 243, 243, 0.04) 50%, rgba(37, 37, 37, 0.04) 50%, rgba(37, 37, 37, 0.04) 100%), linear-gradient(90deg, rgb(34, 222, 237), rgb(135, 89, 215));
      color: #000;
      padding: 9px;
      margin-bottom: 8px;
      outline: none;
      border-radius: 0.50rem;
      text-align: left;
      cursor: pointer;
      position: relative;
      }
      p {
      text-align: left;
      text-align:justify;
      }
      details[open] summary ~ * {
      animation: sweep 0.5s ease-in-out;
      }
      @keyframes sweep {
      0% {
      opacity: 0;
      margin-top: -10px;
      }
      100% {
      opacity: 1;
      margin-top: 0px;
      }
      }
      details > summary::after {
      position: absolute;
      content: "+";
      right: 20px;
      }
      details[open] > summary::after {
      position: absolute;
      content: "-";
      right: 20px;
      }
      details > summary::-webkit-details-marker {
      display: none;
      }
      /* --------------------- */
      #about{
      margin-top:0px;
      box-shadow: 0px 0px  80px #dd7;
      }
     @media (min-width: 360px) and (max-width: 768px) { 
      .col-md-12{
      position: relative;
      min-height: 1px;
      padding-right: 5px;
      padding-left: 5px;
      }
	  
	  /*---=======dep_profile ============--*/
#vd-pro1{margin-top:0px;  
		margin-left: -16px!important;
		margin-right: -16px!important;}
	
#vd-pro2{margin-top:0px;
		margin-left: -16px!important;
		margin-right: -16px!important;}
	
#vd-pro3{margin-top:0px;
		margin-right: -16px!important;
		margin-left: -16px!important;}
/*---=========end==========--*/
      }
	  
	  
	  
	  

	@media screen and (max-width:375px){
		
		 #p0{margin-top:147px;}
         }
		 
		    #V {  
	  color:#000;
	  margin-top:7%;
		 width:100%;
		 position: relative;
         animation: myV 2s ;
         }
         @keyframes myV {
         to {left: 0.9%;}
         from {left: 100px;}
         }
	#M {  
	  color:#000;
		 margin-top:7%;
		 width:100%;
		 position: relative;
         animation: myM 2s ;
         }
         @keyframes myM {
         to {right: 0.9%;}
         from {right: 100px;}
         }
	 #thum{box-shadow: rgb(0 0 0 / 15%) -5px -5px 29px 2px; margin:-53px -31px -2px -27px; box-shadow: 0px 0px 15px #dd7;}
		 @media (min-width: 360px) and (max-width: 768px) {
#thum{box-shadow: rgb(0 0 0 / 15%) -5px -5px 29px 2px; margin: -3px -10px 0 -10px; box-shadow: 0px 0px 15px #dd7;}
		 
		   #vdd {
    width: 177px;
    height: 89%;
    margin-top: 6px;
    float: right;
}

		    #V {   
				color:#000;
	  margin-top:7%;
		 width:100%;
		 position: relative;
         animation: myV 2s ;
         }
         @keyframes myV {
         to {right: 0.9%;}
         from {right: 100px;}
         }
	#M {   color:#000;
		 margin-top:7%;
		 width:100%;
		 position: relative;
         animation: myM 2s ;
         }
         @keyframes myM {
         to {right: 0.9%;}
         from {right: 100px;}
         }

		 }