*,
*.card-container ::after,
*.card-container ::before {
  margin: 0;
  padding: 0; 
  box-sizing: border-box;
}

/* scrollbar */
::-webkit-scrollbar { 
  width: 7px;
  height: 5px;
} 

.card-container ::-webkit-scrollbar { 
  display: none; 
} 

::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.626); */
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /* background: rgb(255, 255, 255);    */
}
   
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px; 
  background: rgba(198, 198, 198, 0.8);
  -webkit-box-shadow: inset 0 0 3px rgba(162, 162, 162, 0.645);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.423);
}


.active{   
  /* display: block !important;     */
  /* opacity: 1 !important;  */ 
}    

.card-container {
  position: fixed;
  z-index: 9000;    
  display: none;  
  justify-content: center; 
  align-items: center; 
  background: radial-gradient(circle, rgb(0 0 0 / 57%) 0%, #00000091 100%);
  /* background: #0000004a ;   */ 
  width: 100%; 
  height: 100%;
 } 
.card-container:target { 
  display: flex;
} 
.card-container .card-group{
  position: absolute;
  width: 100%;     
  height: fit-content;  
  min-width: 600px;  
  max-width: 600px;         
  min-height: 400px;
  max-height: 100%; 
  margin: auto; 
  top: 0;left: 0;right: 0;bottom: 0; 
}
.card-container .card-modal {
  z-index: 9001;  
  display: grid;
  grid-template-rows:repeat(auto-fill, auto); 
  width: 100%;     
  height: fit-content;     
  min-height: 635px; 
  max-height: 95vh;
  overflow-y: auto;       
  cursor: default;  
  /* max-height: 90%;         */ 
  padding: 0 30px 40px 30px; 
  border-radius: .8rem;
  color: hsl(0, 0%, 100%); 
  /* background: linear-gradient(to top, #186491, #2c2c2c);   */
  background: rgb(14,75,112);
background: radial-gradient(circle, rgba(14,75,112,1) 0%, rgba(44,44,44,1) 100%);
  box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0.2);  
  /* border: inset  5px solid rgba(163, 163, 163, 0.185);  */
  /* border-style: dashed;  */ 
}   

.card-container .card-head{
  height: 95px;  
  padding-left: 150px;
  position: relative; 
  align-content: center;  
} 

.card-container .card-info{
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 20px;  
  position: relative;
} 

.card-container .profile-cont{
  position: relative; 
  height: 100%;
  width: 100%;    
  text-align: center;
  order: 2;
  /* background: black; */
} 
.card-container .profile-cont img{
  height: 100%;  
  width: 200px;   
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25); 
  border: solid rgba(255, 255, 255, 0.75) 4px; 
  border-style: groove ;  
  object-fit:cover;  
}

.card-container .card-ribbon{
  position: absolute;
  background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 25%);
  color : black;
  top: 23px;
  left: -20px;      
  cursor: default; 
  padding: 10px 20px 10px 0;    
  width: 175px;   
  z-index: 3;   
  letter-spacing: 0.5px;  
  text-align: right;       
  font: normal small-caps bold 20px var(--text-font);      
  text-transform:uppercase;    
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.125);   
} 
 

.card-container .card-details {
  font-family: var(--text-font); 
  display: grid;
  max-width: 600px; 
  text-align: left; 
}
 
.card-container .sep{ 
  margin-bottom: 30px; 
  font: italic bold  18px/25px var(--text-font); 
  letter-spacing: 5px;     
  text-transform: uppercase;  
  /* text-align: center;  */
  /* box-shadow: 0px 6px 6px 0px white;  */
  margin-top: 30px;  
  border-bottom: 4px solid hsla(0, 0%, 100%, 0.4);
}


.card-container .card-title {
  font-size: 4rem; 
  font-weight: bold; 
  line-height: 40px;
  margin-top: 0; 
  margin-bottom: 5px;  
}
.card-container .card-subtitle {
  font-size: 1.54rem; 
  color: rgb(241, 255, 187);
  margin-top: 0;
}  
.card-container .card-description {
  margin-top: 1.5rem;
  font-size: 1.3rem;
  font-style: italic; 
  line-height: 20px;
  margin-bottom: 0; 
}
.card-container .txt {
  padding: 0 4rem;
  margin-bottom: 4rem;
  font-size: 1.6rem;
  line-height: 2;
}
/* .card-container .txt::before {
  content: '';
  position: absolute;
  top: 0%;
  left: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 18rem;
  height: 18rem;
  border: 1px solid hsla(0, 0%, 100%, .2);
  border-radius: 100rem;
  pointer-events: none;
} */
.card-container .btn {
  padding: 1rem 1.6rem;
  border: 1px solid hsla(0, 0%, 100%, .4);
  border-radius: 100rem;
  color: inherit;
  background: transparent;
  font-size: 1.4rem;
  font-family: inherit;
  letter-spacing: .2rem;
  transition: .2s;
  cursor: pointer;
}
.card-container .btn:hover,
.card-container .btn:focus {
  border-color: hsla(0, 0%, 100%, .6);
  -webkit-transform: translateY(-.2rem);
          transform: translateY(-.2rem);
}
.card-container .link-1 {
  font-size: 1.8rem;
  color: hsl(0, 0%, 100%);
  background: linear-gradient(to right bottom, #009FFF, #ec2F4B);
  box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);
  border-radius: 100rem;
  padding: 1.4rem 3.2rem;
  transition: .2s; 
}
.card-container .link-1:hover,
.card-container .link-1:focus {
  -webkit-transform: translateY(-.2rem);
          transform: translateY(-.2rem);
  box-shadow: 0 0 4.4rem .2rem hsla(236, 50%, 50%, 0.4);
}
.card-container .link-2 {
  width: 4rem;
  height: 4rem;
  opacity: 0; 
  border: 2px solid hsla(0, 0%, 100%, 0); 
  border-radius: 100rem;
  color: inherit;  
  font-size: 2.1rem;  
  position: absolute;  
  top: 22px;  
  right: 32px;  
  z-index: 3;  
  display: flex;
  justify-content: center;
  align-items: center; 
  color: white; 
  background-color: transparent; 
  transition: .2s;
}
.card-container .link-2::before {
  content: ''; 
  color: black;   
  -webkit-transform: translateX(0.1rem);
          transform: translateX(0.1rem);   
} 
.card-container .link-2:hover,   
.card-container .link-2:focus { 
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); 
  border-color: hsla(0, 0%, 100%, .6);
  -webkit-transform: translateX(.2rem);
          transform: translateX(.2rem);  
}

.card-icon{ 
 position: relative; 
 top: -2px;   
 bottom: 0; 
}
.card-icon img{  
  height: 40px;
  width: auto;
} 

/* ////////////////////////////////////////////////////////SKILLS */

/* My Skills */

.progress {  
  height: 10px; 
  border-radius:5px !important;  
} 

.progress .skill .val { 
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}
 
.progress-bar { 
  text-align: left;  
  box-shadow: inset 0px 5px 4px rgba(0, 0, 0, .15) !important;  
  border-radius:5px !important;
  transition-duration: 3s;
}

.skills-container{  
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;  
  column-gap: 20px; 
  width: 100%;
  height: auto;
  max-height: 120px; 
  overflow: hidden; 
  align-items: flex-end; 
  margin-bottom: 10px; 
  transition: 300ms; 
}

.expand-skills{ 
  max-height: 9999px;    
}

.skills-container .card-ribbon{
  top: -50px ;
  overflow:visible;  
  left: -100px; 
} 

.skills-container .skill-item{
  padding: 0;
  margin: 0; 
}

.skill-item span { 
   
  display:block;
  position: relative;
  font:  12px var(--text-font);   
  color: white; 
  text-transform: uppercase;
  letter-spacing: 1.5px;   
  line-height: 18px;
  margin-bottom:5px; 
}

.card-modal .skill-seemore{
  padding: 0px; 
  line-height: 0px;   
  position: relative;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1);
  width: 100%; 
  height: 40px;     
  font-size: 1rem; 
  text-transform:uppercase;  
  background: none; 
  border: 1px solid var(--border-col); 
  transition: 100ms;
  letter-spacing: 3px;  
  align-items: center; 
}  
.card-modal .skill-seemore span{ 
  margin: auto;
}
.card-modal .skill-seemore:hover{
  background: rgb(255,255,255,0.2); 
  /* border: none; */
}