@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Distressed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Lemonada:wght@300..700&display=swap');

:root{
  --mc:#141E30;
  --mc-light:#243B55;
  --my-white:#f1f1f1;
  --midum-black:#383838;
  --soft-black:#807c7c;
  --soft-yellow:#faba3b;
  --main-gradiant:linear-gradient(to bottom right, #516BEB, #7388EF,#1e35aa );
  /*--yellow-gradiant:linear-gradient(to bottom right, #ffb624, #ffcb62,#eb9c00 );
  --main-gradiant2:linear-gradient(to bottom, #5770EC, #516BEB,#1a2d8d );
  --custom-gradiant:linear-gradient(to bottom right, #F5EEDC, #FAEDF0 );*/
}
*{
  box-sizing: border-box;
  direction: rtl;
}

body{overflow-x: hidden;}
a{
  text-decoration: none!important;
  color: var(--midum-black);
}
/*no hover on screen*/
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--midum-black); }
}

.fs_web_12{font-size: 12px!important;}

/*mobile text size*/
@media (max-width: 480px) {
  .fs_mob_12{font-size: 12px!important;}
  .fs_mob_14{font-size: 14px!important;}
  .fs_mob_10{font-size: 10px!important;}
  .fs_mob_8{font-size: 8px!important;}
  }

.p_150t{padding-top: 150px;}
.m_150t{margin-top: 150px}

/* #########################################################################
############################### navbar #####################################
############################################################################ */
.navbar{
  background: #141E30;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
  margin: 0 !important;}
  .navbar-brand {
    color: #fff;
    font-size: 25px;
  }
  .navbar-brand {animation: rd-rotate 8s infinite;}
  @keyframes rd-rotate  {  
    0%  {
        transform: rotateY(0deg); 
        transform-origin: 50% 5% 0;
        }  
    100% {
         transform: rotateY(360deg); 
         transform-origin: 50% 5% 0;
         }  
    }
  
  .navbar-brand:hover {
    color: #fff;
  }

  .nav_img{
     width: 70px;
     height: 50px;
     background: #f1f1f1;
     box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
     border-radius: 5px;
    }

  .navbar-adminname{float: right;}
  .navbar button{color: #FFFFFF;}
  .navbar .nav-item .nav-link{
    color: #fff;
    font-weight: bold;
    font-family: "Cairo", sans-serif;
  }
  .navbar .nav-item .nav-link:hover{
    color: #D1B464;
  }
  .navbar .navbar-nav{justify-content: center;justify-items: center;align-items: center;}
  
  /*color of button icon mobile view*/
  .navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
  .navbar .icon_nav{width: 20px;height: 20px;}
  /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
  ________________________ main form add _____________________
  %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

  /* Progressbar */
  .progressbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    counter-reset: step;
    margin-bottom: 80px;
    margin-top: 40px;
    transition: 1s;
  }
  .progressbar::before,
  .progress {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: var(--soft-black);
    z-index: -1;
    transition: 1s;
  }
  .progress {
    background-color: var(--mc-light);
    width: 0%;
    transition: 0.3s;
    transition: 1s;
  }
  .progress-step {
    width: 2.1875rem;
    height: 2.1875rem;
    background-color: var(--soft-black);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
    font-size: 20px;
    transition: 1s;
  }
  .progress-step::before {
    counter-increment: step;
    content: counter(step);
    transition: 1s;
  }
  .progress-step::after {
    content: attr(data-title);
    position: absolute;
    top: calc(100% + 0.5rem);
    font-size: 0.85rem;
    color: var(--mc-light);
    font-weight: bold;
    transition: 1s;
  }
  .progress-step-active {
    background-color: var(--mc-light);
    color: #f3f3f3;
    font-size: 22px;
    font-weight: bold;
  }
  /*######################################### Forms ############################################################################################
  ############################################################################################################################*/
  /*main add form*/
  .form label {
    display: block;
    margin-bottom: 0.5rem;
    margin-right: 3%;
  }
  .form .form-step .input-group input,.form .form-step select{
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: 2.1px groove rgba(33, 54, 79, 0.7);
    border-radius: 15px!important;
  }
  .form .form-step .input-group input:focus{
    border-color: rgba(33, 54, 79, 0.9);
  }
  .form {
    width: clamp(800px, 30%, 430px);
    margin: 150px auto;
    border: 5px groove rgba(33, 54, 79, 0.7);
    border-radius: 0.35rem;
    padding: 1.5rem;
    box-shadow: 1px 2px 5px rgba(5, 12, 46, 0.2);;
  }
  @media only screen and (max-width: 600px){
    .form {
      width: clamp(98%, 30%, 430px);
    }
    .form .btns-group a{
      width: 40% !important;
      font-size: 13px;
    }
    form .btns-group .btn-next{
      margin-right: 40%!important;
    }
  }
  .form-step {
    display: none;
    transform-origin: top;
    animation: animate 0.5s;
  }
  
  .form-step-active {
    display: block;
  }
  
  .input-group {
    margin: 2rem 0;
  }
  
  @keyframes animate {
    from {
      transform: scale(1, 0);
      opacity: 0;
    }
    to {
      transform: scale(1, 1);
      opacity: 1;
    }
  }
  /*small add form like repo or filetype*/
  .add_my{margin: 150px auto;}
  .add_my .form input,.add_my .form textarea,.add_my .form select{
    width: 100%;
    padding: 0.75rem;
    border: 2.5px groove var(--soft-black);
    border-radius: 15px!important;
  }
  .add_my .form input:hover,.add_my .form input:focus,.add_my .form textarea:hover,.add_my .form textarea:focus{
    border: 2.5px groove rgba(33, 54, 79, 0.7);
    box-shadow: 1px 2px 3px var(--mc-light);
    outline: none;
  }

  .add_my .add_my_p {
  background: linear-gradient(-225deg,var(--mc) 0%,var(--mc) 29%,rgb(255, 199, 87) 27%,#203d8d 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  padding: 10px;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 5s linear infinite;
  font-size: 25px;
  text-align: center;
  align-items: center;
  align-content: center;
  justify-content: center;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
  /*table to show add things like repo or filetype*/

  .custom_table .custom_table_my:hover{
    background:var(--yellow-gradiant);
  }
  .custom_table .w_controll{
    width: 300px!important;
  }
  @media only screen and (max-width: 720px){
    .custom_table .w_controll{
      width: 90vw!important;
    }
  }
  /*####################################################### Button ########################################################
  #######################################################################################################################*/
  form .btns-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .form .btn,.my-btn-sys-color {
    padding: 0.75rem;
    display: block;
    text-decoration: none;
    background-color: var(--mc-light);
    color: #f3f3f3;
    text-align: center;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: 0.3s;
  }
  .form .btn:hover,.my-btn-sys-color {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--mc-light);
    font-weight: bold;
  }
  form .btns-group .btn-next{
    margin-right: 75%;
  }
  /*cusbtn*/
   .cusbtn {
    background-color: #fff!important;
  }
   .cusbtn:hover,.cusbtn:focus{
    border:none!important;
    outline:none!important;
    box-shadow: none!important;
  }

/*dropup menu show inline*/
@media only screen and (min-width: 992px){
.dropdown-menu.show {
  display: block!important;
}
}
.mydropup_manager .dropdown-menu button{
  background: var(--yellow-gradiant);
  width: 100%;
  padding: 5px 0;
  margin: 5px 0;
  border-radius: 5px;
  color: var(--midum-black);
  text-shadow: 1px 1px 1px #eee;
  border:0;
  font-weight: bold;
}
/*set custom m_icon height to fix it with text*/
.mycontroll_benfs .m_icon{top: 4px;position: relative;}
  

/*############################################
  ###### footer ############################
  ############################################*/
  .footer-basic {
  
  background: #141E30;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding:20px 0;
  color:#d4d4d4;
  margin-top: 200px;
}

.footer-basic ul {
  padding:0;
  list-style:none;
  text-align:center;
  font-size:18px;
  line-height:1.6;
  margin-bottom:0;
}

.footer-basic li {
  padding:0 10px;
}

.footer-basic ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.8;
}

.footer-basic ul a:hover {
  opacity:1;
}

.footer-basic .copyright {
  margin-top:15px;
  text-align:center;
  font-size:13px;
  color:#aaa;
  margin-bottom:0;
}

  /* #########################################################################
############################### login #####################################
############################################################################ */
.sign-in {
  justify-content: center;
  align-items: center;
  margin: 10% 0;
  }
  .sign-in .form-button {
  text-align: center; }

  .sign-in .form-group {
  position: relative;
  margin-bottom: 25px;
  overflow: hidden; }
.form-group:last-child {
   margin-bottom: 0px; }

   .sign-in .form-submit {
  display: inline-block;
  background: #141E30;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #243B55, #141E30);
  color: #fff;
  border-bottom: none;
  width: auto;
  font-weight: bold;
  padding: 15px 39px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  margin-top: 25px;
  cursor: pointer;
transition: all 1s; }

.sign-in .form-submit:hover {
  background: #16222A;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #3A6073, #16222A);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3A6073, #16222A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    
  color: #D1B464;
  transition: 0.5s; 
}

.sign-in .register-form {
  width: 100%; }

  .sign-in input {
  width: 100%;
  display: block;
  border: none;
  text-align: center;
  border-bottom: 3px groove #243B55;
  padding: 15px 30px;
  box-sizing: border-box; }
  .sign-in input:focus{
  border: 2px groove #141E30;
  }
  .sign-in .agree-term {
  display: inline-block;
  width: auto; }

  .sign-in label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  color: #141E30; }

  .sign-in .sign-in-div img{
    max-height: 300px!important;
    max-width: 300px!important;
    text-align: center;
    align-items: center;
    padding-right: 30%;
    }
  @media screen and (max-width: 768px) {
.signin-image {
  padding-left: 30%;
  margin: auto;
  text-align: center;
  }
  .sign-in .s_co_name{
    margin: auto!important;
  }
  .sign-in .sign-in-div img{
    max-height: 250px!important;
    max-width: 250px!important;
    text-align: center;
    align-items: center;
    margin-right: 35%;
    }
  }
.my-custom-login-hr{
  padding: 2px;
  color: #243B55;
  width: 50%;
  margin: auto;
  }

.sign-in .s_co_name{
  background: #000000;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #0f9b0f, #000000);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #0f9b0f, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: #fff;
  text-shadow: 0.3px .3px 1px #383838;
  margin-right: 20%;
}

/*admins page*/

/*start members page*/
.admins_sess{margin: 150px auto;}

.member-h1{
  font-size:28px;
  margin:30px 0 ;
  font-weight: bold;
  color:#fff;
  text-align: center;
  font-family: 'Lemonada', cursive;
  border-radius: 15px;
  background: #0F2027;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }

 .member-2{
  font-size:28px;
  margin:30px 0 ;
  font-weight: bold;
  color:#fff;
  text-align: center;
  font-family: 'Lemonada', cursive;
  border-radius: 15px;
  background: #000000;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #0f9b0f, #000000);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #0f9b0f, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }
 
 .btn-add{
  background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
  radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
   width: 150px;
   padding: 8px 2px;
   display: inline-block;
   color: #fff;
   border-radius: 5px;
   outline: none;
   border: none;
   text-align: center;
   box-shadow: 1px 2px 4px #807c7c;
   transition: 2s;
 }
 .btn-add:hover{
  color: #fff;
  background: #141E30;
  transition: 2s;
}
 .main-table{
   -webkit-box-shadow:0 3px 10px #ccc;
   -moz-box-shadow:0 3px 10px #ccc;
   -o-box-shadow:0 3px 10px #ccc;
   box-shadow:0 3px 10px #ccc;
 }
 
 .main-table td{
   background-color: #fff; 
   vertical-align: middle !important;
   border:2px groove #888;
   background-color: #FFE9A0;
   color: #141E30;
   font-weight: bold;
 }
 .main-table tr:first-child td{ /*can use thead */
  background: #f1f1f1;  /* fallback for old browsers */
	color:#000000;
  box-shadow: 1px 1px 2px #ddd;
}

.main-table .pr_img{max-width: 200px;max-height: 200px;border-radius: 5px;box-shadow: 1px 1px 2px #9f7928;}

/*###################################################################################################
######################################### alerts setting ############################################
#####################################################################################################*/
.myalertsec .alert{
  position: absolute;
  top:95px;
  left:20px;
  width: 35vw;
  text-align: center;
}
.alert-emp{
  box-shadow: 2px 2px 3px #D1B464;
  padding: 15px 5px;border-radius: 5px;
  text-align: center;
  font-weight: bold;
  background: #16222A;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #3A6073, #16222A);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3A6073, #16222A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    
  color: #f3f3f3;

}
@media only screen and (max-width: 992px) {
.myalertsec .alert{
  width: 85vw;
}
}


/*############### SHOW ###############*/
.my_imgshow{height: 65vh;margin: auto;box-shadow: 1px 2px 3px #FDB931;margin: 10px;}
.my_info{margin-top: 150px;}
.admin_tittle{text-align: center;font-weight: bold;color: #1A1A2E;}

/*Dashboard*/
.sec_des{margin-top: 150px;position: relative;text-align: center;}
.sec_des img{width: 100%;height: 40vh;}
.sec_des .card{border-radius: 5px;outline: none;box-shadow: 1px 2px 3px #f7da7b;}
.sec_des .card h3{margin-top: 50px;background: rgba(33, 54, 79, 0.3);padding: 5px 25px;border-radius: 5px;text-shadow: 1px 1px 2px rgb(163, 163, 163);font-weight: bold;}
.sec_des .card .my_cus_p{font-size: 35px;font-weight: 900;margin-top: 20px;text-shadow: 2px 3px 5px rgb(63, 62, 62);}
.sec_des .card:hover .my_cus_p{font-size: 45px;transition: .8s;}
.sec_des .card:hover{
  box-shadow: 1px 2px 5px #333129;
  background: #000;
  background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);}
.sec_des .card:hover img{opacity: 0.9;}

/*start projects*/
.sec_des button{cursor: pointer;position: relative;}
.sec_des .card:hover .mycus_dev{color: #fff!important}
.sec_des .card .mycus_dev{color: #141E30!important}

/* workshop */
.wsh_det svg{width: 20px;height: 20px;}

@media only screen and (max-width: 992px) {
  .wsh_det .col-md-12{
    width: 100%;
    text-align: center;
    padding: 20px;
    border: 3px solid rgb(163, 163, 163,0.7);
  }
}
.img_print_workshop{width: 250px;height: 200px;text-align: center;margin: auto;}

/*###########################################################################################
  #####################################  account section     ############################
  ############################################################################################*/
.account_sec{height: 70px;width: 80%; background-color: rgb(163, 163, 163,0.7); position:fixed; bottom:20px}
/*.hei_sec{min-height: 200px;}*/
.account_sec button{width: 100%;}
@media only screen and (max-width: 992px) {
  .account_sec{
    margin-bottom: 95px;
    border-radius: 0!important;
    width: 100%!important;
    background: none!important;
  }
  .account_sec button{width: 70%!important;margin: 1% 15%;display: inline!important;padding: 100px auto!important;}
  .account_sec .row{margin: 0!important;}
  }

/*###########################################################################################
  #####################################  search part     ############################
  ############################################################################################*/
  .con-benfs{margin-top: 150px;justify-content: center;}
  .search,.con-benfs .my-p{
    border:3px solid rgb(245, 240, 240);
    background: #141E30;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #243B55, #141E30);
  }
    .search button{background:#fff;color:#16222A;}
    .search button:hover{background:#D1B464;color:#1A1A2E;}
    .search input:focus{border-color:#F9F3DF;outline: 0 none;}
    .noresult{margin-top: 100px;}
    .ed_img{height: 70vh;width: 100%;}
    .ed_img_show{margin-top: 150px;}

    .dashboard_btn{
    background: #141E30;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #243B55, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #243B55, #141E30);
    color: #fff;
    width :50%;
    font-weight: bold;
    text-align: center;
    margin:auto;
    padding: 15px 5px;
    margin:20px 5px;
    box-shadow: rgba(36, 36, 36, 0.89) 0px 5px 15px 0px;
  }
 .dashboard_btn:hover{color: #fff!important;}
  @media only screen and (max-width: 992px) {
    .dashboard_btn{ width :100%}
  }

  .icon_daily{
    width: 25px;
    height: 25px;
  }
  .adailyarrow{
  background: #eacda3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #d6ae7b, #eacda3);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #d6ae7b, #eacda3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-weight: bold;
  padding: 8px 15px;
  border-radius: 5px;
  }

.adailyarrow:hover{box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;}

.only_mob_show{display: none;}

@media only screen and (max-width: 720px){
  .mobdontshow{display: none;}
}

@media only screen and (max-width: 560px){
  .confirm_but_onmob{ margin-top: 30px!important;width: 35vw!important; margin-left: 15vw!important;}
  .confirm_but_onmob2{ margin-top: 30px!important;width: 25vw!important; margin-left: 50vw!important;}
  .only_lap{display: none!important;}
  .only_mob_show{display: inline-block!important;}
}

.alert_eva{
  position: fixed;
  font-family: 'Lemonada', cursive;
  z-index: 999;
  top: 90%;
  width: 77.5vw;
  margin: auto;
  opacity: 0.9;
}
.alert_eva:hover{
  opacity: 1;
}

.alert_eva strong {
  font-family: 'Lemonada', cursive;
  font-weight: bold;
}

@media only screen and (max-width: 480px){
  .alert_eva{width: 74.7vw;padding: 30px;}
}




  /* SKILLS START */
/* 
// Responsive My Skills Box Widget
// Made with ❤ by @Pawan_Mall
// http://www.pawanmall.net 
*/

#SkillBox {
    font-size: 20px;
    font-family: 'Indie Flower', cursive;
    width: 95%;
    height: auto;
    margin: 40px auto;
    background-color: #fff;
    border: 1px solid #cdcdcd;
    padding: 10px;
    border-radius:20px;
    -o-border-radius:20px;
    -webkit-border-radius:20px;
    -ms-border-radius:20px;
    -moz-border-radius:20px;
    box-shadow: 1px 2px 8px #4b6cb7;
}
.myskill_tittle{
  text-align: center;
  padding: 25px 0;
  font-family: 'Lemonada', cursive;
  font-size: 20px;
  color: #4364F7;
  font-weight: bold;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

.myskill_tittle2{
  text-align: center;
  padding: 15px 0;
  font-family: "Cairo", sans-serif;
  font-size: 16px;
  color: #2C3930;
  font-weight: bold;
  text-shadow: 1px 2px 2px rgba(0,0,0,0.3);
}

.myskill_tittle3{
  text-align: center;
  padding: 10px 0;
  font-family: 'Lemonada', cursive;
  font-size: 18px;
  color: #2C3930;
  font-weight: bold;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.3);
}

.myskill_tittle4{
  text-align: center;
  font-family: "Cairo", sans-serif;
  font-size: 18px;
  color: #f7f7f7;
  font-weight: bold;
  text-shadow: 1px 2px 3px rgba(192, 247, 105, 0.3);
}

.SkillBar {
    height: 50px;
    position: relative;
    background: rgba(17, 17, 17, .2);
    margin: 10px auto;
}

#Skill-degree{
  width: 100%;
  animation: Animate-HTML 4s;
  -webkit-animation: Animate-HTML 4s;
  -moz-animation: Animate-HTML 4s;
  -o-animation: Animate-HTML 4s;
  height: 50px;
  position: absolute;
  border-radius: 8px 0 0 8px; /*TL TR BR BL*/
  box-shadow: 1px 2px 5px #8d8d8d;
}
.bar_weak{
  background: #ED213A;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #93291E, #ED213A);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #93291E, #ED213A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bar_normal{
  background: #FDC830;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #F37335, #FDC830);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
}
.bar_good{
  background: #56ab2f;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
}
.bar_excellent{
  background: #0052D4;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6FB1FC, #4364F7, #0052D4);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #6FB1FC, #4364F7, #0052D4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
}


/* home section */

.home_section{
  padding: 110px 0px;
  font-family: "Cairo", sans-serif;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  display: grid;
}
.home_section .home_info_dev1,.home_section .home_info_dev2{
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  height: 22vh;
  display: grid;
  vertical-align: middle;
  align-items: center;
  margin-top: 5px;
  font-weight: bold;
}
.home_section .home_info_dev1{
  color: #0f0c29;
  background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
  background-blend-mode: screen;
}

.home_section .home_info_dev1 .oklock_main{
  width: 50%;
  margin: auto;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.home_section .home_info_dev2_a{
  color: #0f0c29;
  background: #D3CCE3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #E9E4F0, #D3CCE3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.home_section .home_info_dev2_b{
  color: #FFFFFF;
  background: #093028;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #237A57, #093028);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #237A57, #093028); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.home_section .home_info_dev2_c{
  color:#FFFFFF;
  background: #cb2d3e;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ef473a, #cb2d3e);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #ef473a, #cb2d3e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.home_section .home_info_dev2_d{
  color:#FFFFFF;
  background: #ff0084;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #33001b, #ff0084);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #33001b, #ff0084); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.home_section .home_info_dev2_e{
  color:#FFFFFF;
  background: #000046;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #1CB5E0, #000046);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #1CB5E0, #000046); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.home_section .home_info_dev2_g{
  color:#FFFFFF;
  background: #0F2027;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.home_section .home_info_dev2_y{
  color:#FFFFFF;
  background: #232526;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.home_section .nots_auto_home,.home_section .nots_auto_home button{
  font-size: 16px!important;
}

.home_section .ksagif{width: 60px;height: 60px;margin: 0 20px ;}

.dropdown-item{width: 300px !important}

.navempname{font-size: 14px!important;}

.compnamenav{
  color:#E9E4F0;
  font-family: 'Lemonada', cursive;
  font-size: 28px;
  position: relative;
  top:-5px;
  right: 5%;
  text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

.compnamenaven{
  color:#E9E4F0;
  font-family: "Cairo", sans-serif;
  font-size: 27px;
  position: relative;
  top:-3px;
  left: 5%;
  text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}


.spantit_2{color: #ff8f00 !important;font-family: "Lemonada", cursive;}

.add_my_p_2 {
  font-family: "Cairo", sans-serif;
  font-weight: bold;
  padding: 10px;
  color: #0f0c29;
  font-size: 20px;
  text-align: center;
  position: relative;
  right: 20%;
}