@font-face {
    font-family: "Tajawal"; ;
    src: url(../fonts/Tajawal/Tajawal-Bold.ttf);
  }
  @font-face {
    font-family: "Poppins"; ;
    src: url(../fonts/Poppins/Poppins-Bold.ttf);
  }
  /* ------colors----------- */
  :root.light{
    --a-color: #71C9CE;
    --b-color: #018998;;
    --c-color: #018998;;
    --d-color: #E3FDFD;
    --fff-color: #FFF;

    --A-font-family: "Tajawal", sans-serif;
    --A-font-weight: 400;
    --A-font-style: normal;
    --A-font-size:0.9rem;

    --bg-img:url('../logo_light.svg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--a-color);
   
}
:root.dark {
  --a-color:#222831;
  --b-color:#393E46;
  --c-color:#00ADB5;
  --d-color:#EEEEEE;
  --fff-color:#FFF;

  --A-font-family: "Tajawal", sans-serif;
  --A-font-weight: 400;
  --A-font-style: no-repeat;
  --A-font-size:0.9rem;

  --bg-img:url('../logo.svg');
  background-attachment: fixed;
  background-repeat: round;
  background-color: var(--a-color);
}
:root.red {
  --a-color:#fff;
  --b-color:#ff6969;
  --c-color:#e21b1b;
  --d-color:#420303;
  --fff-color:#FFF;

  --A-font-family: "Tajawal", sans-serif;
  --A-font-weight: 400;
  --A-font-style: no-repeat;
  --A-font-size:0.9rem;

  --bg-img:url('../logo_red.svg');
  background-attachment: fixed;
  background-repeat: round;
  background-color: var(--a-color);
}
/* +++++++++++++++toggle theme+++++++++++++++++ */
.toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: rgba(128, 128, 128, 0.15);
  backdrop-filter: blur(4px);
  padding: 0.75rem 1.5rem;
  border-radius: 60px;
  margin: 2rem auto;
  width: fit-content;
  flex-wrap: wrap;
}

.theme-options {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.2rem 0.5rem;
  border-radius: 46px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 40px 0;
}

.theme-option:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.02);
}

/* تنسيق الـ checkbox الأصلي (إخفاؤه) */
.theme-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* SVG داخل الخيار */
.option-svg svg {
  width: 22px;
  height: 22px;
  transition: fill 0.2s;
  fill: currentColor;
}

/* النص */
.option-text {
  font-size: 0.95rem;
}

/* حالة التحديد (checked) */
.theme-option:has(input:checked) {
  background: var(--primary, #0077ff);
  color: white;
  border-color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* لكل ثيم لون مختلف عند الاختيار (اختياري) */
.theme-option:has(#light:checked) {
  background: #f5a623;
  color: #1e1e2f;
}
.theme-option:has(#theme-toggle:checked) {
  background: #3b3b5e;
  color: #eef;
}
.theme-option:has(#red:checked) {
  background: #e74c3c;
  color: #fff;
}

/* الأيقونات الجانبية */
.theme-icon {
  font-size: 1.6rem;
  opacity: 0.8;
}
/* ++++++++++++++++++++++++++++++++ */

/* --------------------------- */
  .flex{display: flex;}
  .flex-wrap{flex-wrap: wrap;}
  /* -------------------------------- */
  .justify-content-around {justify-content: space-around;}
  .justify-content-between{justify-content: space-between;}
  .justify-content-center {justify-content:center;}
  /* ------------------------------------ */
  .align-items-center{align-items: center;}
  .align-items-start{align-items: start;}
  .align-items-end   {align-items: end;}
  /* ------------container----------------- */
/* --------------------------------- */
  .mh-250{min-height: 250px!important;}
  .height-100{height: 100% !important;}
  .w-100{width:100%!important;}
  .w-90{width:90%!important;}
  .w-80{width:80%!important;}
  .w-70{width:70%!important;}
  .w-65{width:65%!important;}
  .w-60{width:60%!important;}
  .w-50{width:50%!important;}
  .w-40{width:40%!important;}
  .w-35{width:35%!important;}
  .w-25{width:25%!important;}
  .w-20{width:20%!important;}
  .w-10{width:10%!important;}
  .h-10{height: 10rem;}
  .h-100P{height: 100%;}
  .max-h20{max-height:20rem;}
  .m-auto{margin: 0 auto;}
  .m-2{margin:2% !important;}
  .m-1{margin:1% !important;}
  .mm-7{margin-bottom:7%;}
  .mx-2{margin:0 2%;}
  .mx-1{margin:0 1%;}
  .my-2{margin: 2% 0;}
  .my-1{margin: 1% 0;}
  /* --------------------------- */
  .px-20{padding:0 20%;}
  .px-2{padding:0 2%;}
  .px-1{padding:0 1%;}
  /* -------------------------------- */
  .py-2{padding: 2% 0;}
  .py-1{padding: 1% 0;}
  /* -------------------------------- */
  .p-1{padding: 1%;}
  .p-2{padding: 2%;}
  .p-3{padding: 3%;}
  .p-4{padding: 4%;}
  .p-5{padding: 5%;}
  .p-6{padding: 6%;}
  .p-7{padding: 7%;}
  .p-40{padding: 40%;}
  /* ------------------------------------- */
  .position-relative{position:relative;}
  .position-absolute{position:absolute;}
  .top-0{top:0;}
  .top-10{top:10%;}
  .bottom-20{bottom:20%;}
  .bottom-10{bottom:10%;}
  .bottom-5{bottom:5%;}
  .bottom-0{bottom:0;}
.container-fluid{width: 100%;}
.container-90{ width:90%;margin:0 auto;}


  /* filters classes */
  .blur{filter: blur(1rem) !important;}
  .blur-1{filter: blur(1px) !important;}
  .blur-2{filter: blur(2px) !important;}
  .blur-3{filter: blur(3px) !important;}
  .blur-4{filter: blur(4px) !important;}
  .blur-5{filter: blur(5px) !important;}
  /* ------------------- */
   
  /* ----------width----------- */
  .w-100{width:100% !important;}
  .w-90{width:90% !important;}
  .w-80{width:80% !important;}
  .w-70{width:70% !important;}
  .w-60{width:60% !important;}
  .w-50{width:50% !important;}
  .w-40{width:40% !important;}
  .w-30{width:30% !important;}
  .w-20{width:20% !important;}
  .w-10{width:10% !important;}

  /* ---------height---------- */
  .h-100{height:100% !important;}
  .h-90{height:90% !important;}
  .h-80{height:80% !important;}
  .h-70{height:70% !important;}
  .h-60{height:60% !important;}
  .h-50{height:50% !important;}
  .h-40{height:40% !important;}
  .h-30{height:30% !important;}
  .h-20{height:20% !important;}
  .h-10{height:10% !important;}
   
  .b1{min-height: 1vw!important;}
  .min-h2{min-height: 2vw!important;}
  .min-h3{min-height: 3vw!important;}
  .min-h4{min-height: 4vw!important;}
  .min-h5{min-height: 5vw!important;}
  
  .min-h10{min-height: 10vw!important;}
  .min-h20{min-height: 20vw!important;}
  .min-h25{min-height: 25vw!important;}
  .min-h40{min-height: 40vw!important;}
  .min-h50{min-height: 50vw!important;}
  
  .max-h10{max-height: 10vw!important;}
  .max-h20{max-height: 20vw!important;}
  .max-h25{max-height: 25vw!important;}
  .max-h40{max-height: 40vw!important;}
  .max-h50{max-height: 50vw!important;}
  
  
  
    /* ثانياً: طريقة WebKit (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
      width: 0;
    }
    
  ::-webkit-scrollbar-track {
        background: var(--b-color);  
    }
    
  ::-webkit-scrollbar-thumb {
        background-color: var(--b-color);
        border-radius: 10px; 
        border: 2px solid var(--a-color);  
       /* لإضافة إطار بسيط حول المقبض */
   
    }
    /* تغيير لون التحديد ليكون متناسقاً مع موقعك */
    ::selection {
      background-color: var(--b-color);
       /* نفس اللون العنابي */
      color: var(--a-color); 
      /* لون النص المحدد */ 
    }
    
    /* لمتصفح فايرفوكس */
    ::-moz-selection {
      background-color: var(--a-color);
      color: var(--b-color);
    }
    html {
      scroll-behavior: smooth;
    }
  body{
    overflow: scroll;
    background: var(--a-color)!important; 
      background-image: var(--bg-img);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;       
     /* ملء كامل — يقطع الحواف إذا احتاج */
    background-position: center center;
    
    background-color: var(--a-color);
    
      padding: 0; margin:0;box-sizing: border-box;
      font-family: var(--A-font-family);
      font-weight: var(--A-font-weight);
      font-style: var(--A-font-style);
      font-size: var(--A-font-size);
 
      div{
        background: var(--a-color);    border-radius: 50px 0;
        &:hover{background-color: var(--c-color)}

      }
      div:nth-child(2){
        background: var(--a-color);    border-radius: 50px 0;
        &:hover{background-color: var(--c-color)}
      }
      div:nth-child(3){
        background: var(--a-color);    border-radius: 50px 0;
      }
      div:nth-child(4){
        background: var(--a-color);    border-radius: 50px 0;
      }
  }
  
  /* *:hover{ outline: 1px dotted var(--a-color);} */
  * {margin: 0; padding: 0px;    transition: all step-end 0.1s !important;border: 0px;text-align: center !important;overflow-x: hidden !important;}
  * font{color: var(--d-color) !important;}
  * form{display: flex;justify-content: center !important;flex-wrap: wrap;margin: 0 !important;background: var(--d-color);}
  * form>input{margin: 0 0.1%;}
  /* -------------------------- */
  * svg{
    fill:var(--d-color)!important;height:24px!important;width: 24px!important;padding: 1px!important;   
    path{stroke:var(--d-color)!important;fill:var(--d-color)!important;background: var(--d-color)!important;}
    path:nth-child(1){stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;} 
    path:nth-child(2){stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;} 
    
    line{stroke:var(--d-color)!important;fill:var(--d-color)!important;background: var(--d-color)!important;}
    line:nth-child(1){stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;}
    line:nth-child(2){stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;}
    
    ellipse{stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;}
    ellipse:nth-child(1){stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;}
    ellipse:nth-child(2){stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;}
    
    rect{stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;}
    rect:nth-child(1){stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;}
    rect:nth-child(2){stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;}
    
    circle{stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;}
    circle:nth-child(1){stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;}
    circle:nth-child(2){stroke:var(--c-color)!important;fill:var(--c-color)!important;background: var(--c-color)!important;} 
  }
    /* ------------------- */
   * svg:hover path{stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; padding: 1px!important;}
   * svg:hover path:nth-child(1){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover path:nth-child(2){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover path:nth-child(3){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover path:nth-child(4){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}

   * svg:hover line{stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; padding: 1px!important;}
   * svg:hover line:nth-child(1){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover line:nth-child(2){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover line:nth-child(3){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover line:nth-child(4){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}

   * svg:hover ellipse{stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; padding: 1px!important;}
   * svg:hover ellipse:nth-child(1){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover ellipse:nth-child(2){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover ellipse:nth-child(3){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover ellipse:nth-child(4){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}


   * svg:hover rect{stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; padding: 1px!important;}
   * svg:hover rect:nth-child(1){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover rect:nth-child(2){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover rect:nth-child(3){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover rect:nth-child(4){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
 
   * svg:hover circle{stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; padding: 1px!important;}
   * svg:hover circle:nth-child(1){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover circle:nth-child(2){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover circle:nth-child(3){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}
   * svg:hover circle:nth-child(4){stroke: var(--a-color) !important;fill:var(--a-color);height:24px!important;width: 24.5px!important; font-weight: bold;}

  * nav p{text-decoration:none !important; color: var(--d-color) ;}
  * nav a{text-decoration:none !important; color: var(--d-color) ;}
  * p{text-decoration:none !important; color: var(--d-color) ;padding: 0px;}
  * p>a{text-decoration:none !important; color: var(--c-color) ;}
  * body>a{text-decoration:none !important; color: var(--c-color) ;}
  * h1{text-decoration:none !important; color: var(--c-color) ;}
  * h2{text-decoration:none !important; color: var(--c-color) ;}
  * strong{text-decoration:none !important; color: var(--c-color) ;}

  * footer{text-decoration:none !important; color: var(--d-color) ;}
  * a{text-decoration:none !important; color: var(--a-color) ;padding: 0px;}
 
  * a:link:hover{color: var(--a-color) !important; transition: all 0.5s !important;font-weight: bold;}
  * li:hover > a:link{color: var(--a-color) !important; transition: all 0.5s !important;}
  * li:hover > span,i,svg{color: var(--a-color) !important; transition: all 0.5s !important;}
  * table{overflow: scroll; background:var(--d-color)!important;opacity: 90%!important;margin: 0 auto!important;
  tr>th {background: var(--c-color);color: var(--d-color);box-shadow: 1px 0px 10px var(--d-color);}
  tr>td {background: var(--a-color);color: var(--d-color);box-shadow: 1px 0px 10px var(--d-color);}}
  * input{background: var(--b-color);padding: 10px;font-weight: bold; outline-color: var(--c-color);border: 0px;color: var(--a-color);}
  * label{background: var(--b-color);padding: 10px;font-weight: bold; outline-color: var(--c-color);border: 0px;color: var(--a-color);}
  * select{background: var(--d-color);padding:10px;color:var(--a-color);font-weight: bold;border-radius: 10px 0px!important;position: relative;}
  * select:hover{
    background: var(--d-color);color:var(--c-color);font-weight: bold;
    li > a{font-weight: bold; background: var(--b-color);}}
  * select option{background: var(--d-color);padding:10px;color:var(--a-color);font-weight: bold;border-radius: 10px 0px!important; position: absolute;}
  * select option:hover a{background: var(--a-color);color:var(--d-color);font-weight: bolder;border-radius: 10px 0px!important;padding-right: 5px;}
    * button{background: var(--c-color);padding:10px; color:var(--d-color);font-weight: bold; align-items: center;display: flex; justify-content: center;border: 0px;}
    /* -------------svg--------- */
   .svg-container svg{
    width: 100%!important;
      max-width: 100% !important;
   }
  .svg-container:hover svg path {
      stroke: var(--a-color)!important;
      fill:var(--a-color)!important;
      transition: all 0.5s !important;
      
  
    }
    .svg-container:hover svg  circle {
      stroke: var(--a-color)!important;
      fill:var(--a-color)!important;
      transition: all 0.5s !important;
   
  
    }
  
  /* -------generic class--------- */
  
   /* ------------------------ */
  /* أو لعنصر معين فقط  chrome ..*/
  * ul::-webkit-scrollbar {
    display:block;
    color:var(--c-color);
  }
  * ul {
    -ms-overflow-style: block;  /* IE and Edge */
    scrollbar-width: block;  /* Firefox */
    color:var(--c-color);
  }
  /* ------------------ */
  .over-flow-hidden{overflow:hidden !important;}
  
  .top-0{top:0 !important;}
  .top-10{top:10% !important;}
  .top-20{top:20% !important;}
  .top-30{top:30% !important;}
  
  .bottom-0{bottom:0 !important;}
  .bottom-10{bottom:10% !important;}
  .bottom-20{bottom:20% !important;}
  .bottom-30{bottom:30% !important;}
  .bottom-40{bottom:40% !important;}
  .bottom-50{bottom:50% !important;}
  .bottom-60{bottom:60% !important;}
  .bottom-70{bottom:70% !important;}
  
  .left-0{left:0 !important;}
  .left-10{left:10% !important;}
  .left-20{left:20% !important;}
  .left-30{left:30% !important;}
  
  
  .right-0{right:0 !important;}
  .right-10{right:10% !important;}
  .right-15{right:15% !important;}
  
  /* colors class */
  .a-color{color:var(--a-color) !important;}
  .b-color{color:var(--b-color) !important;}
  .c-color{color:var(--c-color) !important;}
  .d-color{color:var(--d-color) !important;}
  

  .fff-color{color:var(--fff-color) !important;}
  
  /* background-colors class */
  .bg-a-color{background-color:var(--a-color) !important;}
  .bg-b-color{background-color:var(--b-color) !important;}
  .bg-c-color{background-color:var(--c-color) !important;}
  .bg-d-color{background-color:var(--d-color) !important;}

  .bg-fff-color{background-color:var(--fff-color) !important;}
  
  
  
  /* size */
  .as1-1{aspect-ratio: 1/1 !important;}
  .t-scale-2{transform: scale(2);}
  
  .scaleX1{ transition: all 0.3; z-index: 10;}
  .scaleX1:hover{transform: scale(1.1);transition: all 0.3s !important;}
  .transition-all-03{transition: all 0.3s !important;}
  
  /* borders */
  .br-none{border:none !important;}
  .br-20{border-radius: 20px !important;}
  .br-10{border-radius: 10px !important;}
  .br-5{border-radius: 5px !important;}
  
  .br-all-1{border: 1px solid var(--d-color);}
  .br-t-1{border-top: 1px solid var(--d-color);}
  .br-m-1{border-bottom: 1px solid var(--d-color);}
  .br-r-1{border-right: 1px solid var(--d-color);}
  .br-l-1{border-left: 1px solid var(--d-color);}
  .br-tm-1{border-top: 1px solid var(--d-color)!important;border-bottom: 1px solid var(--d-color)!important;}
  .br-rl-1{border-right: 1px solid var(--d-color);border-left: 1px solid var(--d-color);}
  /* outline */
  .outline-none{outline:none;}
  .outline-1{outline: 1px solid var(--d-color);}
  .outline-offset-2{outline-offset: 2%;}
  
  /* font */
  .f-size{font-size: 0.5vw;}
   .f-size-1{font-size: 1vw;}
   .f-size-2{font-size: 2vw;}
   .f-size-3{font-size: 3vw;}
  
   .list-style-none{list-style-type: none;}

  /* ---------------------- */
  
    /* 1. تنسيق الرابط الأساسي */
    .cool-link {
      text-decoration: none; /* إزالة الخط الافتراضي */
      color: var(--c-color); /* لون النص الأساسي */
      font-size: var(--A-font-size);
      position: relative; /* ضروري لضبط مكان الخط بالنسبة للرابط */
      padding-bottom: 5px;
    }
  
    /* 2. إنشاء الخط الوهمي (مخفي حالياً لأن العرض 0) */
    .cool-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;      /* وضعه في أسفل الرابط */
      height: 2px;    /* سُمك الخط */
      width: 0%;      /* البداية: العرض صفر */
      background-color: var(--a-color); /* اللون الأحمر */
      
      /* السر هنا: التحول يستغرق 2 ثانية وبشكل ناعم */
      transition: width 0.5s ease-out; 
    }
  
    /* 3. عند مرور الفأرة (Hover) */
    .cool-link:hover::after {
      width: 100%; /* النهاية: العرض كامل */
      
    }
  /* ---------------------- */
  @media (max-width = 1024px){

    .box{width:50dvw!important;box-shadow:0px 2px 10px #00ADB5!important;}
 
    }

@media (max-width = 768px){

  .box{width:100dvw!important;box-shadow:0px 2px 10px #00ADB5!important;}
 
}
  /* نقاط التوقف الشائعة (Common Breakpoints)
الهواتف الصغيرة: max-width: 480px
الهواتف المتوسطة/الكبيرة: max-width: 768px
الأجهزة اللوحية (portrait): min-width: 768px و max-width: 1024px
أجهزة سطح المكتب:          min-width: 1024px
الشاشات الكبيرة:           min-width: 1200px */

/* ============Animations=============== */
 
 
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes shimmer2 {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.animation-1{
  background: linear-gradient(70deg, var(--c-color) 25%, var(--d-color) 70%, var(--c-color) 25%);
  background-size: 400% 100%;
  animation: shimmer 10s ease infinite;
  border-radius: 4px;
}
.animation-2{
  background: linear-gradient(70deg, var(--d-color) 25%, var(--c-color) 70%, var(--d-color) 25%);
  background-size: 400% 100%;
  animation: shimmer2 10s ease infinite;
  border-radius: 4px;
}
.animation-3{
  color: linear-gradient(70deg, var(--d-color) 25%, var(--c-color) 70%, var(--d-color) 25%);
  background-size: 400% 100%;
  animation: shimmer2 10s ease infinite;
  border-radius: 4px;
}
/* ------------------------- */
@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink {
  50% { border-color: transparent; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}