@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
*{
    --white-metal:rgb(240, 240, 240);
    --transwhite: rgba(255, 255, 255, 0.259);
    --white:#fff;
    --white2:#ededed;
    --black:#000000;
    --menu-black:#181818;
    --text-secondary-light:#7d8387;
    --border:#80848d33;
    --border-bolder:#80848d6d;
    --primary: #42a6f8;
    --dark-primary: #2274b7;
    --menu-grad:linear-gradient(120deg, #42a6f8 2%, #b9efff 4%, #84e2ff 50%, #42a6f8 54%);
    --menu-grad-90:linear-gradient(0deg, #42a6f8 2%, #b9efff 4%, #84e2ff 50%, #42a6f8 54%);
     --boxes-time: 400ms cubic-bezier(0.4, 0, 0.2, 1) 300ms;
  }
  ::selection {
    color: white;
  background: var(--primary);
  }
  
  ::-webkit-scrollbar {
  width: 4px;height: 4px;}
  ::-webkit-scrollbar-track {background:var(--white);}
  ::-webkit-scrollbar-thumb {transition: 0.7s;background: #00000047; border-radius: 100px;}
  ::-webkit-scrollbar-thumb:hover{background: #000000cc;}
  
  
body{background: linear-gradient(200deg, white 0%, rgb(219, 244, 255) 100%);display: flex;flex-direction: column;justify-content: flex-end;align-items: end;margin: 0;padding: 0;font-family: 'Manrope', sans-serif;position: relative;width: 100vw;height: 100vh;}
.nav{box-shadow: 0 0 10px 1px #00000011;margin: 20px;width: calc(77% - 70px);padding: 0 15px;position: fixed;top: 0;inset-inline-end: 0;height: 60px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;backdrop-filter: blur(30px);background-color: var(--transwhite);border-radius: 10px;}
.nav .links{padding: 0 2%;      
    display: flex;flex-direction: row;justify-content: center;align-items: center;gap: 5px;height: 100%;
}
.nav .links .link{position: relative;;font-weight: 600;border-bottom: solid 2px transparent;  display: flex;flex-direction: row;justify-content: center;align-items: center;gap: 8px;color: black;padding: 10px;height: calc(100% - 20px);text-decoration: none;font-size: 13px;}
.nav .links .link.drpdwn .dd{width: 18px;}
.nav .links .link.drpdwn .l{width: 100%;}
.nav .links .link.drpdwn{position: relative;}

.nav .links .link:hover{color: var(--primary);border-bottom: solid 2px var(--primary);}
.nav .other{gap: 5px;display: flex;flex-direction: row;justify-content: center;align-items: center;height: 100%;}
.nav .other .btn-lang{width: 20px;height: 20px;filter: brightness(0);margin-inline-end: 20px;}
.btn-1{transition: .1s ease-in-out;color: var(--black);text-decoration: none;border-radius: 1000px;display: flex;flex-direction: row;justify-content: center;align-items: center;gap: 5px;font-size: 14px;outline: none;border: none;}
.btn-1.lg{padding: 10px 30px;}
.btn-1:hover{background-color: rgba(0, 0, 0, 0.107);}
.btn-1.black{background-color: var(--black);color: var(--white);}
.btn-1.black:hover{background-color: var(--black);color: var(--white);opacity: 0.8;}
.btn-1.primary{background-color: var(--primary);border: solid 2px transparent;}
.btn-1.primary:hover{background-color: transparent;border: solid 2px var(--primary);color:var(--primary)}

.sidenav{box-shadow: 0 0 10px 1px #00000011;width: calc(23% - 70px);margin: 20px;border-radius: 10px;position: fixed;top: 0;inset-inline-start: 0;height: calc(100% - 100px);padding: 30px;display: flex;flex-direction: column;justify-content: start;align-items: center;backdrop-filter: blur(30px);background-color: var(--transwhite);}

.sidenav .logo{width: 100%;height: 40px;object-fit: contain;padding-bottom: 20px;border-bottom: solid 1px rgba(0, 0, 0, 0.114);}
.sidenav .links{gap: 5px;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 40px 0;}
.sidenav .links .link.drpdwn .out{width: 100%;text-decoration: none;color: rgba(26, 23, 41, 0.915);display: flex;flex-direction: row;justify-content: start;align-items: center;flex-wrap: wrap;gap: 16px;font-size: 13px;font-weight: 500;position: relative;}

.sidenav .links .link{max-height: 21px;overflow: hidden;width: calc(100% - 18px);padding: 9px;border-radius: 11px;text-decoration: none;color: rgba(26, 23, 41, 0.915);display: flex;flex-direction: row;justify-content: start;align-items: center;flex-wrap: wrap;gap: 16px;font-size: 13px;font-weight: 500;position: relative;}
.sidenav .links .out{cursor: pointer;gap: 16px;display: flex;flex-direction: row;justify-content: start;align-items: center; width: 100%;}
.sidenav .links .link img{width: 20px;height: 20px;}
.sidenav .links .link:hover{background-color: rgba(0, 0, 0, 0.038);}
.sidenav .links .link.active{background: var(--primary);color: var(--white);}
.sidenav .links .link.active img{filter: brightness(0%) invert(100%);}
.sidenav .dd{width: 10px;position: absolute;z-index: 1;inset-inline-end: 18px;top: 0px;}
.sidenav .links .link .in{gap: 5px;background-color: rgba(3, 5, 25, 0.029);border-radius: 10px;padding: 10px;width: 100%;position: relative;display: flex;flex-direction: column;justify-content: start;align-items: center;}
.sidenav .links .link .in .l{font-size: 12px;border-radius: 8px;width: 90%;padding: 9px 5%;text-decoration: none;color: rgba(0, 0, 0, 0.721);}
.sidenav .links .link .in .l:hover{background-color: #e7f1f5;}

@media screen and (max-width: 1000px){
  .sidenav{width: calc(23% - 70px);margin: 10px;height: 40%;padding: 15px;overflow: visible !important;}
  .sidenav .logo{height: 50px;padding-bottom: 10px;}
  .sidenav .links{margin: 20px 0;}
  .sidenav .links .out{gap: 16px;width: 100%;}
  .sidenav .links .link{max-height: 21px;width: calc(100% - 8px);padding: 9px;gap: 16px;font-size: 13px;}
  .sidenav .dd{display: none;}

  .nav{margin: 20px;width: calc(77% - 70px);padding: 0 15px;height: 50%;width: calc(23% - 70px);position: fixed;bottom: 0;inset-inline-start: -10px !important;top: 43vh;flex-direction: column;}
  .nav .links{padding: 0;      
      display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 5px;height: 100%;width: 100% !important; }
  .nav .links .link{flex-direction: column;padding: 20px 0;height: fit-content;text-decoration: none;font-size: 10px;width: 100%;}
  .nav .links .link.drpdwn .dd{width: 18px;}
  .nav .links .link.drpdwn .l{width: 100%;}
  .nav .links .link.drpdwn{position: relative;}
  
  .nav .links .link:hover{color: var(--primary);border-bottom: solid 2px var(--primary);}
  .nav .other{gap: 5px;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;}
.nav .other .btn-lang{width: 20px;height: 20px;filter: brightness(0);margin-inline-end: 20px;}
.btn-1{width: calc(100% - 40px);gap: 5px;font-size: 13px;outline: none;border: none;padding: 10px 10px !important;border-radius: 5px;}


}


.main{inset-inline-end: 20px;top: 90px;;position: absolute;overflow-y: scroll;box-shadow: 0 0 10px 1px #00000011;height: calc(100vh - 170px);width: calc(77% - 140px);padding: 30px 50px;backdrop-filter: blur(30px);background-color: var(--transwhite);border-radius: 10px;display: flex;flex-direction: column;justify-content: start;align-items: center;}
.breadcrumbs{display: flex;flex-direction: row;justify-content: start;align-items: center;font-size: 13px;font-weight: 500;color: black;width: 100%;}
.breadcrumbs .secondary{color: rgba(0, 0, 0, 0.448);}
.breadcrumbs .secondary::after{content: '/';margin: 0 7px;}
.breadcrumbs .primary{padding: 5px 12px;background-color: rgba(0, 0, 0, 0.056);border-radius: 5px;}
.main .seperator-text{width: calc(100% - 40px);font-size: 14px;font-weight: 600;padding: 12px 20px;margin-top: 40px;opacity: .9;}
.main.home .welcome{margin: 45px 0;width: 100%;display: flex;flex-direction: column;justify-content: start;align-items: start;gap: 18px;}
.main.home .welcome span{font-weight: 400;opacity: .7;}
.main.home .welcome h1{width: 100%;font-size: 34px;margin: 0;}
.main.home .welcome h2{width: 45%;min-width: 300px;font-size: 13px;margin: 0;font-weight: 500;opacity: .5;line-height: 20px;}
.main .sector-boxes{width: 100%;display: flex;flex-direction: row;justify-content: start;align-items: start;flex-wrap: wrap;gap: 20px;margin: 20px 0;}
.main .sector-boxes .box{text-decoration: none;width: 32%;height: 300px;background: linear-gradient( 30deg, #9fd5ffab, #eaf1ff);border-radius: 20px;position: relative;overflow: hidden;display: flex;flex-direction: column;justify-content: center;align-items: center;color: var(--black);transition: .1s ease-in-out;text-align: center;}
.main .sector-boxes .box:hover{background: linear-gradient( 30deg, #0888ffd6, #e3edff);}
.main .sector-boxes .box:hover .background{transform: scale(180%);}
.main .sector-boxes .box p{font-size: 27px;margin-bottom: 10px;font-weight: 500;font-weight: 600;}
.main .sector-boxes .box span{font-size: 12px;opacity: .6;line-height: 15px;width: 65%;font-weight: 400;}
.main .sector-boxes .box .background{transition: .3s ease-in-out;width: 100%;height: 100%;object-fit: cover;position: absolute;inset-inline-end: -20%;top: -20%;opacity: .03;pointer-events: none;filter: brightness(0);}
.main .slices{margin: 20px 0;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 18px;}
.main .slices .slice{font-weight: 600;transition: .1s ease-in-out;width: calc(100% - 40px);padding: 15px 20px;border-radius: 15px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-color: #00000009;text-decoration: none;color: var(--black);}
.main .slices .slice:hover{background-color: var(--primary);color: white;}
.main .slices .slice:hover img{background-color: var(--white);filter: invert(0);}
.main .slices .slice img{width: 20px;height: 20px;object-fit: contain;background-color: rgb(189 89 7);padding: 5px;border-radius: 10px;filter: invert(100%);}

@media screen and (max-width: 1000px){
  .main{inset-inline-end: 10px;height: calc(100vh - 115px);width: calc(100% - 130px);padding: 30px 20px;backdrop-filter: blur(30px);background-color: var(--transwhite);border-radius: 10px;display: flex;flex-direction: column;justify-content: start;align-items: center;top: 10px;}
  .main .sector-boxes{width: 100% !important;display: flex;flex-direction: row;justify-content: start;align-items: start;flex-wrap: wrap;gap: 10px;margin: 20px 0;}

  .main .sector-boxes .box{width: 48%;height: 200px;}
  .main .sector-boxes .box:hover{background: linear-gradient( 30deg, #0888ffd6, #e3edff);}
  .main .sector-boxes .box:hover .background{transform: scale(180%);}
  .main .sector-boxes .box p{font-size: 18px;margin-bottom: 10px;font-weight: 500;font-weight: 600;width: 90%;}
  .main .sector-boxes .box span{font-size: 11px;opacity: .6;line-height: 15px;width: 65%;font-weight: 400;}
  .main .sector-boxes .box .background{transition: .3s ease-in-out;width: 100%;height: 100%;object-fit: cover;position: absolute;inset-inline-end: -20%;top: -20%;opacity: .03;pointer-events: none;filter: brightness(0);}
  .main .slices{margin: 20px 0;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 18px;}
  .main .slices .slice{font-weight: 600;transition: .1s ease-in-out;width: calc(100% - 40px);padding: 15px 20px;border-radius: 15px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;background-color: #00000009;text-decoration: none;color: var(--black);}
  .main .slices .slice:hover{background-color: var(--primary);color: white;}
  .main .slices .slice:hover img{background-color: var(--white);filter: invert(0);}
  .main .slices .slice img{width: 20px;height: 20px;object-fit: contain;background-color: rgb(189 89 7);padding: 5px;border-radius: 10px;filter: invert(100%);}
  
}

.table {
  background: linear-gradient(30deg, #9fd5ff39, #eaf1ffc3);
  border-radius: 14px;
  width: calc(100% - 20px);
  padding: 10px;
  margin: 20px 0;
  text-align: start;
}
.table th, .table td {
  padding: 13px 30px;
  background-color: rgba(0, 0, 0, 0.034);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: start;
}
.table tbody {
width: 100%;
}
.table tbody tr {
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  margin-bottom: 10px;
}
 .controls {flex-direction: row;
  display: flex;
  gap: 15px;
}
.controls .edit-button{
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  cursor: pointer;
}
.controls  img{
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
}

.delete-module {
  background-color: #00000053;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed !important;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0 !important;
  z-index: 1;
  backdrop-filter: blur(5px);
}
.delete-module .module {
  background-color: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 100px;
}


.edit-module{
  width: calc(100% - 100px);position: relative;height: fit-content;
    padding: 40px 50px;
    display: flex;flex-direction: row;justify-content: space-between;align-items: center;flex-wrap: wrap;
    row-gap: 10px;
    background-color: white;
    border-radius: 20px;
} 
.label{
display: flex;flex-direction: column;justify-content: start;align-items: start;position: relative;
}
.label p{
  pointer-events: none;
  padding: 2px 10px;background-color: white;border-radius: 5px;position: absolute;inset-inline-start: 7px;top: 9px;
  font-size: 16px;margin: 0;font-weight: 500;opacity: 1;
  transition: .2s ease-in-out;

}
.edit-module .title{
  display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100%;margin: 10px 0;padding-bottom: 20px;
  font-size: 25px;font-weight: 700;
}
.edit-module .title span{  font-size: 12px;font-weight: 500;opacity: .6;margin: 10px 0;}
.label.sm{
  width: calc(50% - 10px);
}
.label.xl{
  width: 100%;
}
.label.file{
  margin-top: 20px;
  margin-bottom: 30px;
  width: 100%;
}
.label.file p{top: -20px;font-weight: 700;color: var(--primary) !important;}
.label.file input[type="file"]{
width: calc(100% - 60px);
background-color: white;
border:dashed 3px var(--primary);
text-align: center;flex-direction: column;
justify-content: center;align-items: center;
padding: 30px;}
.label .textin {
  width: calc(100% - 40px);
  outline: none;
  border: solid 2px rgba(0, 0, 0, 0.263);
  padding: 13px 20px;
  border-radius: 7px;
}
.label textarea {
  min-width: calc(100% - 40px);
  max-width: calc(100% - 40px);
  min-height: 130px;
}

.col{
  display: flex;flex-direction: row;justify-content: end;align-items: center;width: 100%;gap: 10px;
}
.label:hover textarea {
  border: solid 2px var(--primary);
}
.label:hover .textin {
  border: solid 2px var(--primary);
}

.label .textin:focus {
  border-color: var(--dark-primary);
}
.label input[type="submit"] {
  position: absolute;inset-inline-end: 3px;height: 34px;width: 34px;top: 5px;border-radius: 5px;border: none;background-color: var(--primary);box-shadow: none;outline: none;color: white;

}
.label input[type="submit"] {
  position: absolute;inset-inline-end: 3px;height: 34px;width: 34px;top: 5px;border-radius: 5px;border: none;background-color: var(--primary);box-shadow: none;outline: none;color: white;

}
.label input[type="submit"]:hover{
  filter: brightness(90%);
}
.delete-module .module{
  gap: 20px !important;
}
.delete-module div{
  display: flex;flex-direction: row;justify-content: center;align-items: center;gap: 10px;
}
.delete-module img{
width: 70px;margin-bottom: 10px;
}
.label {
  display: flex;
  flex-direction: column;
  margin: 10px 0;
}
.label p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  padding: 2px 10px;
  background-color: white;
  border-radius: 5px;
}
.label input[type="text"], .label textarea {
  width: calc(100% - 40px);
  outline: none;
  border: solid 2px rgba(0, 0, 0, 0.263);
  padding: 13px 20px;
  border-radius: 7px;
}
.label input[type="submit"] {
  position: absolute;
  inset-inline-end: 3px;
  height: 34px;
  width: 34px;
  top: 5px;
  border-radius: 5px;
  border: none;
  background-color: var(--primary);
  box-shadow: none;
  outline: none;
  color: white;
}
.col {
  display: flex;
  justify-content: end;
  gap: 10px;
  width: 100%;
}
.delete, .submit, .cancel {
  cursor: pointer;
  font-size: 15px;
  padding: 13px 23px;
  border-radius: 10px;
  outline: none;
}
.delete {
  background-color: #ff2b2b;
  color: white;
  border: solid 1px rgb(255, 43, 43);
}
.submit {
  background-color: var(--primary);
  color: white;
  border: solid 1px var(--primary);
}
.cancel {
  background-color: none;
  border: solid 1px rgba(0, 0, 0, 0.032);
}
.cancel:hover {
  background-color: rgba(0, 0, 0, 0.088);
}
@media screen and (max-width: 1000px){

  .label.sm{
    width: 100%;
  }
  .edit-module{
    width: calc(100% - 20px);
      padding: 40px 10px;
      display: flex;flex-direction: row;justify-content: space-between;align-items: center;flex-wrap: wrap;
      row-gap: 10px;
      background-color: white;
      border-radius: 20px;
  } 
  .table {
    background: linear-gradient(30deg, #9fd5ff39, #eaf1ffc3);
    border-radius: 14px;
    width: calc(100% - 20px);
    padding: 10px;
    margin: 20px 0;
   
  }
  .table th{
    padding: 13px 10px !important;
  }
  .table th, .table td {
    padding: 0px 10px;
    background-color: rgba(0, 0, 0, 0.034);
    border-radius: 10px;
    font-size: 8px;
    font-weight: 600;
    text-align: start;
  }
  .table tbody {
  width: 100%;
  }
  .table tbody tr {
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin-bottom: 10px;
  }
}