/* ----------------------------------------
============= custom css  ==============
-------------------------------------------*/
.darkmood{
   --primary-color:#CCB395;
   --primary-text-color: #000;
   ---t-link:#b5c5d8;
   --secondary-color: #dadee2;
   --default-white:#1b1717;
   --default-black:#ffffff;
   ---link-a-color: rgb(228, 65, 15);
   --gradient-bg: linear-gradient( 100deg, #e4dfd8,  #ffffff  80%);
   
}
:root{
    /* background color  */
    --primary-color:#040e1a;
    ---t-link:#061220e0;
    --text-orange: rgb(255, 69, 12);
    --secondary-color: #0d2138;
    --default-white:#ffffff;
    --default-black:#1b1717;
    --gradient-bg: linear-gradient( 100deg, #040e1a,  #040e1a 80%);
   
    
   

    /* text-color  */
    ---link-a-color: #04A6CF;
    --primary-text-color: #c7e9e9;
     

    /* gradient color  */
    
    --gradient-1: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%);
    --gradient-2: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%, #0ea5ea);
    --gradient-3: linear-gradient(90deg, #000d1a, transparent);
    --gradient-4: linear-gradient(50deg,rgb(228, 65, 15),  #4ebef1fa 100%);
   
    /* transition  */
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
    --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);


     /* fontsize  */
     --font-h1:2.3rem;
     --font-h2:2.0rem;
     --font-h3:1.8rem;
     --font-h4:1.6rem;
     --font-h5:1.4rem;
     --font-h6:1.3rem;
     --font-p:1rem;
     --font-a:0.7rem;
     --font-btn:1.2rem;

     --font-6:0.6rem;
     --font-8:0.8rem;
     --font-9:0.9rem;

    }
    

    #control{
      padding: 1px;
      border-radius: 50%;
      cursor: pointer;
      position: fixed;
      top: 25px;
      right: 60px;
      display: flex;
      justify-content: center;
      align-items: center; 
      transition: var(--transition-1);
      animation: zoom 0.3s , linear;
      z-index: 3;
      
    
    }
  #control img:last-child{
      display: none;
  }
  .darkmood #control img:first-child{
      display: none;
      transition: var(--transition-1);
      animation: zoom 0.3s , linear;
  }
  .darkmood #control img:last-child{
      display: block;
      margin-top: 0px;
      transition: var(--transition-1);
      animation: zoom 0.3s , linear;
  }



    /* ----------------------------------------
      ============= reset css  ==============
      -------------------------------------------*/
    *,
    *::after,
    *::before{
        margin: 0;
        padding: 0;
        box-sizing: border-box;

    }
    li{
        list-style: none;
    }

    a,
    img,
    input,
    button,
    i{
        display: block;
        text-transform: capitalize;
    }
    a{
        text-decoration: none;
    }
    img{
        height: auto;
        max-width: 100%;
        object-fit: cover;
    }
   
    html{
        scroll-behavior: smooth;
       
    }
    body{
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        font-family: "Manrope", sans-serif;
        font-size:var(--font-p) ;
        /* background:var(--primary-color) ; */
        background: var(--gradient-bg);
        position: relative;
        color: var(--primary-text-color);
        transition:  all 0.5s ease-in-out;
        overflow-X: hidden; 
    }
    
    
    h1{
         
        font-size: var(--font-h1);
    }
    h2{
        font-size: var(--font-h2);
    }
    h3{
        font-size: var(--font-h3);
    }
    h4{
        font-size: var(--font-h4);
    }
    h5{
        font-size: var(--font-h5);
    }
    h6{
        font-size: var(--font-h6);
    }
    p{
        font-size: var(--font-p);
        color: var(--primary-text-color);
    }
    button{
        font-size: var(--font-btn);
       border: 1px solid #000 ;
        cursor: pointer;
        outline: 0;
    }

    ::-webkit-scrollbar { 
        width: 5px; 
        
    }

    ::-webkit-scrollbar-track { 
        background-color: var(--default-black); 
        overflow: hidden;
    }

    ::-webkit-scrollbar-thumb {
    background-color: var(--text-orange);
    border-radius:100px;
   
}


   .container{
    max-width: 100%;
    height: 12vh;
    padding: 0.5% 3% ;
    
    margin: 0 auto ;
   }
   section, footer{
    margin: 2% 12%;
    max-width: 100%;
   }
   /* ==================removal animation======================== */
      section{
         animation: appear linear;
         animation-timeline: view();
         animation-range: entry 0% cover 40%;

      }
      @keyframes appear{
         from{
            opacity: 0.8;
            scale: 0.9;}
         to{
            opacity: 1;
            scale: 1;
         }
      }
      /* ==================slide menu scroll animation======================== */
      @keyframes slideIn {
         0%{
             transform: translateY(-100%);
         }
         100%{transform: translateY(0);}
         
      }
      /* ==================decoration img animation======================== */
      @keyframes bgDecoration {
         0%{transform: translateY(40px) ; opacity: 0;}
         100%{transform: translateX(0);}
         
      }
      @keyframes heroDecoration {
         0%{transform: translateY(-40px) translateX(-60px) rotate(0); }
         100%{transform: translateY(10px) rotate(0.3turn); opacity: 0;}
         
      }

      /* ==================skill animation======================== */
      @keyframes html {
         to{ width: 96%;}   
     }
     @keyframes css {
         to{ width: 85%;}   
     }
     @keyframes js {
         to{ width: 65%;}   
     }
     @keyframes rt {
         to{ width: 47%;}   
     }

     /* ==================zoom animation======================== */
     @keyframes zoom{
      from{
          transform: scale(0);
      }to{
          transform: scale(1);
      }
   }

    /* ==================slider animation======================== */
   @keyframes slider{
      from{
          transform: translateX(0);
      }
      to{
          transform: translateX(-100%);
      }
   }
   
    


   /* ----------------------------------------
   =============header css  ==============
   -------------------------------------------*/
   header{
    max-width: 100%;
    margin: 0 auto;
    height: auto;
   
    
   }
   .head{
    width: 100%;
    max-width: 100%;
    display: flex;
    padding: 30px;
    height: 11vh;

    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    
   border-bottom: 1px solid #33303054;
    backdrop-filter: blur(15px);
    background-color: none;
    
    text-align: center;
   
    z-index: 10;
   }
   header .active-header{
    animation: slideIn 0.5s ease forwards;
   }
   /* @keyframes slideIn {
    0%{
        transform: translateY(-100%);
    }
    100%{transform: translateY(0);}
    
   } */

   .logo{
    max-width: 100%;
    z-index: 999;

   
   }
  .backgroung-walpepar{
   max-width: 100%;
   margin: 0 auto;
   position: absolute;
   width: 100%;
   height: 100%;
   top: -55px;
   left: 0px;
   border-radius: 0 100% 0 ;
   background: url(image/cta-bg.png);
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   opacity: 1;

  }
   .logo img{
    transition: var(--transition-2);
    border-radius:50%;
    padding: 0;
    width: 180px;
    margin-bottom: 20px;
    transform: scale(1);
   }
   .logo img:hover{
      transform: scale(0.9);
   
   }
   /* menu start here  */
   #menu{
    width: 40px;
    max-width: 100%;
    overflow: hidden;
    display: none;
    cursor: pointer;
    padding: 1px;
    border-radius: 10px;
    transition: var(--transition-1);
   }
   #menu:hover{
    background-color:var(--text-orange);
   }

   #sidebar{
    position: fixed;
    top: 1px;
    right: 0px;
    height: 100vh;
    width: 0px;
    z-index: 1001;
    background-color:var(--secondary-color);
    border-radius: 10px 0 0 10px;
    /* backdrop-filter: blur(15px); */
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px 20px;
    border: 1px solid #b6adad60;
    transition:0.5s var(--transition-2);
    overflow: hidden;
   }
   #sidebar .active-sidebar{
    transform: translateX(-300px);
    transition: 0.5s var(--cubic-out);
   }
   #sidebar:hover{
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
   }
   .sidebar-logo{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #fff ;
    padding: 5px 0;
    animation: msg-icon 2s linear infinite alternate;
   }
   .sidebar-logo img{
    max-width: 100%;
    transform: scale(1);
    transition: var(--transition-1);
    border-radius: 50%;
    margin-bottom: 10px;
    opacity: 0.9;
   }
   .sidebar-logo img:hover{
    transform:  scale(1.02);
    box-shadow: rgba(235, 226, 226, 0.048) 0px 5px 15px;
   }
   .menu-cross-btn{
    position: absolute;
    top: 25px;
    right: 25px;
    cursor: pointer;
   }
   .menu-cross-btn a i{
      display: block;
      margin-top: -20px;
      margin-right: -20px;
      background-color: #e7e4e409;
      padding: 2px 4px;
      text-align: center;
      border-radius: 50%;
    color: rgb(228, 65, 15);
    cursor: pointer;
    font-weight: 800;
    transition: var(--transition-2);
   }
   .menu-cross-btn a i:hover{
    transform: rotate(180deg);
   }
   #sidebar ul{
    max-width: 100%;
    padding: 12px 15px;
    border-bottom: 1px solid #131111;
    
   }
   #sidebar ul li{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
   }
   #sidebar ul li a{
    margin: 3px 0;
    display: block;
    font-size: 0.8rem;
    color:var(--primary-text-color) ;
    letter-spacing: 1px;
    font-weight: 700;
    transition: var(--transition-1);
   }
   #sidebar ul li a:hover{
    color: rgb(228, 65, 15);
    letter-spacing: 2px;
   }
   
   #sidebar ul li a:hover::after{
    content: '';
    position: absolute;
    width: 6px;
    height: 1px;
    background-color:rgb(228, 65, 15) ;
    bottom: 0;
    left: 0;
    margin: 0 auto;
   }
   #sidebar .profile{
    
    border-top: 1px solid #131111;
    margin: 5px 0;
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
   height: 85px;
   padding: 15px 0;
   }
   #sidebar .profile .profile-card{
    text-align: left;
    max-width: 100%;
   }
   #sidebar .profile .profile-card h6{
    font-size: 0.9rem;
    color:var(--primary-text-color) ;
    font-weight: 800;
   }
   #sidebar .profile .profile-card p{
    font-size: 0.7rem;
    display: inline-block;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px 0;
    gap: 3px;
    color: var(--primary-text-color);
    opacity: 0.5;
   }
   .profile-card p span{
    color:var(---link-a-color) ;
    font-size: var(--font-p);
    font-weight: 800;
    opacity: 1;
    cursor: pointer;
    transition: var(--transition-1);
   }
   .profile-card p span:hover{
    color: var(--text-orange);
   }
   #sidebar .profile-link-list{
    border-bottom: 1px solid  #131111 ;
    max-width: 100%;
    margin: -10px 0 10px;
    padding-bottom: 10px;
    padding-left: 3px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
    
   }
   .profile-link-list .link-left,
   .profile-link-list .link-right{
    width: 100%;
    padding-left: 8px;
   }
   .profile-link-list .link-left{
    border-right: 1px solid  #131111;
   }

   .profile-link-list a{
    font-size: var(--font-a);
    text-transform: capitalize;
    font-weight: 700;
    margin: 3px 0;
    color: var(--primary-text-color);
    transition: var(--transition-1);
    
   }
   .profile-link-list a:hover{
    color: var(--text-orange);

   }
   #sidebar .sidebar-fotter{
    text-align: center;
    font-size: var(--font-a);
    margin: 20px 0;
   }
   #sidebar .social-link{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
   }
   .social-link a {
    padding: 5px;
    border-radius: 10px;
    color:var(--default-white) ;
    font-size: var(--font-btn);
    transition: var(--transition-1);
    transform: scale(1);
   }
   .social-link a:hover{
    box-shadow: rgba(30, 104, 153, 0.219) 0px 5px 15px;
    transform: scale(1.02);
   }

   /* #menu ends here  */
   nav{
    width: 100%;
    max-width: 100%;
    display: flex;
    margin:  0 auto;
   position: fixed;
   padding: 1%;
   margin-top: 10px;
   padding-right: 100px;
   top:-200px;
    justify-content: flex-end;
    align-items: center; 
    transition: 0.5s ease-in-out;
    
   }
   nav ul{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-right: 50px;

   }
   nav ul li{
    max-width: 100%;
   border: 1px solid #fffcfc70;
    border-radius: 20px;
    background-color:var(---t-link) ;

    transition: var(--transition-1);
    position: relative;
    
   }
   nav ul li:hover{
    border: 1px solid var(--text-orange);
    box-shadow: rgba(255, 255, 255, 0.089) 0px 4px 5px 0px;
    position: relative;
    background-color:var(--primary-color) ;
   }
   nav ul li a{
    font-size: var(--font-a);
    color: var(--primary-text-color);
    cursor: pointer;
    margin: 0 10px;
    padding: 5px 8px ;
    font-weight: 700;
   

   }
   nav ul li:last-child{
    background:var(--gradient-2);
    font-weight: 800;
    
   }
   nav ul li:last-child:hover{
      border: 1px solid var(---link-a-color);
   }
   
   nav ul .list .active{
    color:var(---link-a-color) ;
    font-weight: 800;
    
   }
   nav ul li:hover::after{
    content: '';
    position: absolute;
    width: 10px;
    align-items: center;
    border-radius: 20%;
    height: 2px;
    bottom: -8px;
    left: 50%;
    background-color: var(--text-orange);
   }
   .list.tooltip{
      position: relative;
      opacity: 0.8;
      
   }
   .tooltip .tooltipText{
      width: 100px;
      background:var(--text-orange) ;
      visibility: hidden;
      color: #000;
      text-align: center;
      border-radius: 0px 5px 5px 5px;
      padding:8px 0;
      position: absolute;
      z-index: 1;
      bottom: -35px;
      left: 50%;
      margin-left: -40px;
      text-transform: capitalize;
      font-size: var(--font-a);
      font-weight: 800;
      opacity: 1;
      transition: opacity 0.4s;
   }
   .tooltipText::before{
      
      content: "";
      position: absolute;
      
      top: -13px;
      left: 50%;
      margin-left: -10px;
      border: 8px solid transparent;
      border-bottom-color: var(--text-orange);
   }

   .tooltip:hover .tooltipText {
      visibility: visible;
      opacity: 1;
    }

   li .list-dropdown {
    display: inline-block;
  }
  li.list-dropdown:hover{
    padding: 5px 0;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color:var(--secondary-color);
    min-width: 170px;
    top: 36px;
    right: -70px;
    border-radius: 5px 5px 10px 10px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    z-index: 1;
    border: 1px solid #000;
    transition: 0.5s;
    
    
  }
  .dropdown-f{
   position: relative;
  }
  .dropdown-f-span{
   position: absolute;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   top: 44px;
   right: 15px;
   padding: 3px;
   padding-top: 6px;
   font-weight: 800;

   font-size: 0.5rem;
   color: #000;
   background:var(--gradient-2);
   text-align: center;
   text-transform: uppercase;
  }
 
   
  .dropdown-content a {
    color: var(--primary-text-color);
    padding: 7px 10px;
    margin: 5px;
    max-width: 90%;
    text-align: center;
    border: 1px solid var(--primary-text-color);
    border-radius: 25px;
    text-decoration: none;
    display: block;
    position: relative;
    font-weight: 800;
    transition: var(--transition-2);
        
  }
  .dropdown-content a:hover::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 2px;
    top: 50%;
    left: 10%;
    background-color:var(--text-orange);
  }

  .dropdown-content a:hover {
    color:var(--text-orange) ;
    border: 1px solid var(--color-orange);
  }
  
  
  .list-dropdown:hover .dropdown-content {
    display: block;
  }
  .dropbtn i{
    margin-left: 10px;
    transition: var(--transition-1);
    
  }
  .dropbtn i:hover{
    color:var(--text-orange) ;
   
  }

 /* ========================= header ends here========================= */
 /* ========================= main start here========================= */

 /* ----------------------------------------
   ============= main css  ==============
   -------------------------------------------*/

 main{
    padding-top: 10%;
    max-width: 100%;
    margin:  0 auto;
    height: auto;
    position: relative;
    
 }
 #hero{
    padding: 40px 5px; 
    box-shadow: rgba(208, 202, 241, 0.103) 0px 30px 60px -12px inset, rgba(10, 0, 0, 0.3) 0px 18px 36px -18px inset;
    border-radius: 10px 10px 0 0;
    margin-top: 5%;
    
   
 }
 
 .hero-container{
    max-width: 100%;
    margin: 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
 }
 .hero-heading{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    position: relative;
 }
 .hero-heading img{
   border: 1px solid rgb(15, 243, 15);
   padding: 1px;
 }
 .hero-content{
    position: relative;
    max-width: 100%;
 }
  .decor-img{
    position: absolute;
    top: 110px;
    left: -40px;
    opacity: 0.2;
     animation: bgDecoration 6s linear infinite alternate; 
    /* animation: heroDecoration 4s linear infinite alternate; */
 }
 .hero-heading p{
    text-transform: capitalize;
    color:rgb(4, 126, 4) ;
    font-size: var(--font-a);
    position: relative;
    font-weight: 800;
 }
 .hero-heading p::before{
    content: '';
    position: absolute;
    top: 5px;
    left: -8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgb(26, 228, 26);
 }
 .hero-content .title{
    margin-top: 10px;
    
 }
 .hero-content .title span{
    font-size: var(--font-p);
    font-weight: 800;
    color: #0ea5ea;
    transition: var(--transition-2);
    text-transform: capitalize;
    
 }
 .hero-content .title span.title-span:hover{
    color: rgb(8, 170, 8);
    font-weight: 800;
    

 }
 .title span.title-span{
    font-size: var(--font-p);
    color:var(--primary-text-color) ;
    transition: 0.6s;
   font-weight: 600;
   transition: var(--transition-2);
 }
 .title .title-box{
    display: flex;
    flex-direction: column;
 }
 .title h1{
    line-height: 55px;
    max-width: 580px;
    margin: 25px  0 50px;
    transition: 0.4s;
    font-size: var(--font-h1);
 }
 .title h1 b{
    transition: 0.3s;
 }
 .title h1 b:hover{
    color: #0ea5ea;
 }
 .title h1:hover{
    font-weight: 600;
 }
 .buttons{
    display: flex;
    gap: 20px;
 }
 .title a{

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 9px 16px;
    font-size: var(--font-a);
    color: var(--primary-text-color);
    border-radius: 15px;
    background: var(--primary-color);
    max-width: 130px;
    width: 100%;
    border: 1px solid #00000052;
    cursor: pointer;
    transition: var(--transition-2);
    font-weight: 700;
    
    
 }
 .title a:hover{
   font-weight: 800;
   
 }
 .buttons a:first-child{
   background: var(--gradient-2);
   
 }
 .title a:hover:not(a.scroll-down){
    background: var(--gradient-4);
 }
 .title a img{
    width: 15px;
    margin-left: 8px;
    animation: msg-icon 2s linear infinite alternate;
    
 }
 .hero-image{
    position: relative;
 }
 .hero-image img{
    width: 250px;
    max-width: 100%;
    border-radius: 25px;
    transform: scale(1);
    transition: var(--transition-2);
 }
 .hero-image img:hover{
    transform: scale(1.02);
 }
 
 .hero-bg-img{
    position: absolute;
    top: -80px;
    right: -100px;
    z-index: -1;
    opacity: 0.1;
    animation: bgDecoration 6s linear infinite alternate;
    
 }
 
 .hero-image .shape{
    width: 22px;
    opacity: 0.8;
    position: absolute;
    z-index: -1;

    animation: heroDecoration 4s linear infinite alternate;
 }
 

 .shape.shape-1{
    top: 0;
    right: 0;
    z-index: 1;
    width: 20px;
    
 }
 .shape.shape-2{
    left: 10px;
    width: 35px;
 }
 .shape-3{
    bottom:-100px ;
    left: 50px;
    animation: bgDecoration 6s linear infinite alternate;
 }
 .shape.shape-3{
    opacity: 0.8;
    animation: bgDecoration 6s linear infinite alternate;
 }
 .title a.scroll-down{
    border: 1px solid var(--text-orange);

 }
 .title a.scroll-down:hover{
    background: none;
    border: 1px solid #383636;
 }





 /* ----------------------------------------
============= about css  ==============
-------------------------------------------*/
 #about{
    border: 1px solid #302e2e;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 1% ;
    margin-top: 6%;
    max-width: 100%;
    border-radius: 8px;
    background-color: var(--secondary-color);
    position: relative;
 }
 .about-text {
    padding: 5px;
    line-height: 28px;
    text-align: left;
    max-width: 90%;
    word-spacing: 2px;
    font-weight: 500;
    
 }
 #about .remove-sumit{
   display: none;
   position: absolute;
   top:18px;
   right: 10px;
   width: 170px;
   height: 170px;
   padding: 1px;
   border-radius: 50%;
   border: 1px solid #000;
   cursor: pointer;
   transition: var(--transition-1);
   transform: scale(1);
}
#about .remove-sumit:hover{
   transform: scale(1.02);
}
 .about-text span{
    transition: 0.6s;
 }
 .about-text span:hover{
    font-weight: 600;
 }

 .about-wrap-container{
   margin: 20px 5px 5px;
    max-width: 300px;
    display: flex;
    gap: 10px;
    justify-content:flex-start;
    align-items: center;
    text-align: center;
 }
 #about .remove-sumit{
   display: none;
 }
 .about-wrap-container .about-wrap{
   border: 1px solid var(--text-orange);
   border-radius: 10px;
    padding:3px 8px;
    transition:var(--transition-1);
    cursor: pointer;
 }
 .about-wrap-container .about-wrap:hover{
    border: 1px solid #534f4f;
 }
 .about-wrap .numbers{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
 }
 .numbers #num{
    font-size: var(--font-h4);
    font-weight: 400;
    transform: scale(1);
    transition: var(--transition-1);
    animation: zoom 1s linear;
    
 }
 .numbers #num:hover{
   transform: scale(1.4);
   
 }
 .numbers i{
    color: var(--text-orange);
    font-size: var(--font-h5);
    font-weight: 800;

 }
 .about-wrap p{
    font-size: var(--font-a);
    opacity: 1;
    color: var(--primary-text-color);
    padding: 0 0 5px;
    text-transform: capitalize;
    transition: var(--transition-1);
    font-weight: 500;
 }
 .about-wrap p:hover{
    font-weight: 600;
 }
 .about-scroll{
    position: absolute;
    bottom: 30px;
    right: 20px;
    transition: var(--transition-1);
 }
 




 /* ----------------------------------------
============= tools css  ==============
-------------------------------------------*/

#tools{
   max-width: 100%;
   position: relative;
   padding: 10px 20px;
   padding-bottom: 20px;
   border: 1px solid rgba(117, 115, 115, 0.178);
   border-radius: 25px;
   box-shadow: rgba(60, 60, 65, 0.2) 0px 7px 29px 0px;
}
#tools h2{
   font-size: var(--font-h2);
   font-weight: 500;
   margin-bottom: 15px;
   position: relative;
   text-align: left;
   
}
#tools .tools-text{
   font-weight: 500;
   letter-spacing: 1px;
   text-align: left;
   margin-bottom: 25px;
   max-width:380px ;
}
.tools-container{
   max-width: 100%;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   align-items: center;
   justify-content: center;
   position: relative;
   
}
.tools-container .tools-items{
   border: 1px solid var(--primary-text-color);
   border-radius: 10px;
   display: flex;
   gap: 10px;
   justify-content: flex-start;
   align-items: center;
   padding: 5px 8px;
   margin: 5px;
   transition: var(--transition-1);
}
.tools-container .tools-items:hover{
   border: 1px solid var(--text-orange);
}
.tools-items img{
   cursor: pointer;
   transform: scale(1);
   transition: var(--transition-1);
   animation: msg-icon 2s linear infinite alternate;
}
.tools-items img:hover{
   transform: scale(1.1);
}
.tools-items .tools-content{
   display: flex;
   flex-direction: column;
   width: 100%;
   margin: 3px 0;
}
.tools-content .tolls-heading{
   position: relative;
   width: 100%;
   text-transform: capitalize;
   font-weight: 700;
}
.tools-content p{
   font-size: var(--font-a);
   text-transform: capitalize;
   margin-bottom: 5px;
   font-weight: 800;
   letter-spacing: 1px;
   color: var(---link-a-color);
}






 /* ----------------------------------------
============= skill & experts css  ==============
-------------------------------------------*/

 #skill{
    
    padding: 1% ;
    margin-top: 6%;
    max-width: 100%;
    border-radius: 8px;
    
    position: relative;
    border: 1px solid rgba(117, 115, 115, 0.178);
   border-radius: 5px;
   box-shadow: rgba(60, 60, 65, 0.2) 0px 7px 29px 0px;
 }
 #skill .skill-container{
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

 }
 .skill-side-1,
 .skill-side-2{
    width: 100%;
 }

 .skill-head{
    max-width: 100%;
    
 }
 .skill-head h2{
    font-weight: 600;
    margin-bottom: 30px;
    transition: var(--transition-2);
    position: relative;
 }
 .skill-head h2::after, 
 .topic-title::after, 
 #tools h2::after,
 #worktemplete h2::after,
 .feature-blog-right h6::after{
    position: absolute;
    content: '';
    width: 50px;
    height: 3px;
    bottom: -2px;
    left: 0;
    border-radius: 10%;
    background: var(--gradient-1);
    transition: var(--transition-2);
 }
 .skill-head h2:hover::after,
 .topic-title:hover::after,
 #tools h2:hover::after,
 #worktemplete h2:hover::after,
 .feature-blog-right h6:hover::after{
    width: 90px;
    background: var(--gradient-4);
 }

 .skill-head h2:hover{
    font-weight: 500;
 }
 .skill-head .skill-text{
    font-size: var(--font-p);
    font-weight: 500;
    opacity: 0.7;
    text-align: justify;

 }
 .skill-content{
    margin: 10px ;
    max-width: 100%;
     height: auto;
     display: flex;
     justify-content: space-between;
     position: relative;
     
 }
 .skill-body{
    border: 1px solid #00000065;
    width: 100%;
    height: 38vh;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    border-radius: 15px;
    box-shadow: rgba(63, 61, 61, 0.24) 0px 3px 8px;
 }
 
 .skill-content .skill-name{
     font-size: 0.8rem;
     color:var(--primary-text-color) ;
     font-weight: 600;
     letter-spacing: 1px;
     margin-top: 8px;
    
 }
 
 .skill-content .skill-box{
     position: absolute;
     width: 96%;
     height: 8px;
     background-color:var(---t-link) ;
     border: 1px solid #ffffff17;
     top: 33px;
     left: 5px;
     border-radius: 8px;
 
     
 } 
 .skill-box .html-skill{
     width: 0%;
     height: 8px;
     border-radius: 8px;
     background-color: rgb(25, 189, 167);
     animation:  html 4s forwards;
 }
 .skill-box .css-skill{
     width: 0%;
     height: 8px;
     border-radius: 8px;
     background-color: rgb(197, 136, 23);
     animation:  css 4s forwards;
 }
 .skill-box .js-skill{
     width: 0%;
     height: 8px;
     border-radius: 8px;
     background-color: rgb(250, 205, 5);
     animation:  js 4s forwards;
 }
 .skill-box .rt-skill{
     width: 0%;
     height: 8px;
     border-radius: 8px;
     background-color: rgb(33, 54, 172);
     animation:  rt 4s forwards;
 }
 .skill-box .percentage{
     position: absolute;
     right: 15px;
     top: 10px;
     font-size: var(--font-a);
     font-weight: 700;
     
 }
 /* @keyframes html {
     to{ width: 96%;}   
 }
 @keyframes css {
     to{ width: 85%;}   
 }
 @keyframes js {
     to{ width: 65%;}   
 }
 @keyframes rt {
     to{ width: 47%;}   
 } */

 .expert-container{
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    
}
.button-box{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    width: 100%;
    gap: 2px;
    align-items: center;
    margin-top: 5px;
    border: 1px solid #635e5e10;
    border-radius: 8px;
}
.expert-container a{
    display: inline-block;
    border: none;
    cursor: pointer;
    outline: none;
    border: 1px solid var(---link-a-color);
    padding:8px 15px;
    margin: 2% 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-text-color);
    background: var(--secondary-color);
    
    border-radius: 5px;
    transition: var(--transition-2);
    animation: zoom 1s, linear;
}
.expert-container a:hover{
    background:var(--gradient-1) ;
    color:#fff;
    font-weight: 800;

}
.tabpanel{
  
   
    text-align: left;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 300px;
    margin: 2px;
    display: none; /*(!important)*/
    transition: 0.4s;
    border-radius:0 0 8px 8px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-color: var(--secondary-color);
    transition: var(--transition-1);
    animation: zoom 0.3s linear;
    

}
.tabpanel img{
    position: absolute;
    bottom: 50px;
    right: 20px;
    opacity: 1;
    animation: bgDecoration 4s linear infinite alternate;
    /* animation: heroDecoration 4s linear infinite alternate; */
}
.tabpanel::before{
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 15px;
    height: 2px;
    border-radius: 50%;
    background: var(--gradient-2);
    transition: var(--transition-2);
}
.tabpanel:hover::before{

    width: 150px;
}

.tabpanel p{
    text-align: left;
    padding:30px ;
    color: var(--primary-text-color);
    opacity: 0.8;
    line-height: 25px;
    margin-top: 35px;
    font-weight: 600;
    letter-spacing: 0.04rem;
}
.tabpanel p::first-letter{
    color: var(--text-orange);
    font-size: var(--font-h5);
    letter-spacing: 2px;
    font-weight: 800;
}

#btn1{border:1px solid  #4d49496b;}
#btn2{border:1px solid #4d49496b;}
#btn3{border:1px solid  #4d49496b;}
#btn4{border:1px solid  #4d49496b;}

#btn1:hover, 
#btn2:hover,
#btn3:hover,
#btn4:hover{
    border: 1px solid var(---t-link);
}






/* ----------------------------------------
=============topics css  ==============
-------------------------------------------*/
#topics{
   max-width: 100%;
   margin-top: 6%;
   height:auto;
   border: 1px solid #0000002a;
   background-color:var(--secondary-color);
  padding: 5px 25px;
   align-items: center;
   justify-content: center;
   display: flex;
   position: relative;
   border-radius: 10px;
   border: 1px solid rgba(117, 115, 115, 0.178);
   border-radius: 5px;
   box-shadow: rgba(60, 60, 65, 0.2) 0px 7px 29px 0px;
}

.topic-body{
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   margin-bottom: 10px;
   width: 30%;
   position: relative;
}
.topic-body .topic-head{
 width: 100%; 
}
.topic-head .topic-title{
   font-size: var(--font-h4);
   font-weight: 600;
   color:var(--primary-text-color);
   margin:5% 0;
   position: relative;
   transition: var(--transition-2);
}
.topic-head .topic-title:hover{
   font-weight: 500;
}
.topic-head .text{
   color:var(--primary-text-color) ;
   opacity: 0.7;
   font-size: 0.9rem;
   line-height: 22px;
   margin-bottom: 25px;
   font-weight: 700;
   max-width: 280px;

}
.topic-btn{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 5px;
   margin-bottom: 25px;
   
}
.topic-btn .arrow{
   color:#fff;
   background: var(--gradient-1);
   padding: 7px 7px;
   border-radius: 50%;
   box-shadow: rgba(0, 0, 0, 0.267) 0px 5px 15px;
   transition: var(--transition-1);
   border: 1px solid #00000028;
   font-size: var(--font-a);
   cursor: pointer;
   
   
   
}
.topic-btn i{
   font-weight: 800;
   transition: var(--transition-2);

}

.topic-btn i:hover{
   border: 1px solid var(--text-orange);
   color:var(--text-orange) ;
   background: none;
   background-color: var(--primary-color);

}
#topic-slider{
   width: 70%;
   position: relative;
   height: 210px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   flex-direction: row;
   border-radius: 5px;
   overflow: hidden;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   
}
.slide-item{
  width: 100%; 
  position: absolute; 
  top: 0;
  left: 10px; 
  border-radius: 5px;
  transition:   0.5s;
  padding: 15px;
  background-color:var(--secondary-color);

}

.slide-item:nth-child(1){
   left: calc(-250px + -20px);
}
.slide-item:nth-child(2){
   left: 0;
}
.slide-item:nth-child(3){
   left: calc(300px + 20px);
}
.slide-item:nth-child(4){
   left: calc((300px + 20px) * 2);
}
.slide-item:nth-child(5){
   left: calc((300px + 20px) * 3);
}
.slide-item:nth-child(6){
   left: calc((300px + 20px) * 4);
}

.slide-item img{
   max-width: 310px;
   margin: 2px;
   padding: 2px;
   height: auto;
   object-fit: cover;
   border-radius: 5px; 
   align-items: center; 
   position: relative; 
   cursor: pointer;
   transform: scale(1);
   transition: var(--transition-1);
}

 .topic-img-btn{
   background-color:var(--default-white);
   border: 1px solid var(---link-a-color);
   font-size: var(--font-a);
   padding: 5px 12px;
   border-radius: 15px;
   color:var(--default-black) ;
   font-weight: 700;
   cursor: pointer;
   position: absolute;
   bottom: 25px;
   right: 25px;
   transition: var(--transition-1);
}
span#new-popup{
   position: absolute;
   background:var(--gradient-1);
   top: -22px;
   right: 5px;
   padding: 5px;
   width: 28px;
   color: #000;
   height: 25px;
   font-weight: 100;
   font-size: 0.6rem;
   text-align: center;
   border-radius: 50%;
}
.topic-img-btn:hover{
   background-color:var(--default-black) ;
   color: var(--default-white);
   border: 1px solid var(--text-orange);
}
.slide-item img:hover{
   transform: scale(1.04);
}


.topic-modal{
   position: fixed;
   height: 100%;
   width: 100%;
   margin-top: 25px;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.993);
   z-index: 1;
   overflow: auto;
   opacity: 0;
   pointer-events: none;
}
.topic-modal-body{
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   flex-direction: column;
}
.topic-modal.active{
   opacity: 1;
   pointer-events: all;
}
.topic-modal-img{
   width: 100%;
   max-height: 600px;
   max-width: 400px;
   object-fit: cover;
}
.topic-modal.active .topic-modal-img,
.topic-modal.active .topic-modal-text{
   animation: zoom 0.3s , linear;
}
/* @keyframes zoom{
   from{
       transform: scale(0);
   }to{
       transform: scale(1);
   }
} */
.topic-modal-text{
  
  margin-top: 20px;
   font-size: var(--font-h6);
   font-weight: 800;
   color:var(--text-orange) ;
   text-transform: capitalize;
  
}
.topic-closed{
   position: absolute;
   top: 5rem;
   right: 5rem;
   color: var(--text-orange);
   font-size: var(--font-a);
   font-weight: 800;
   padding: 5px 10px;
   background-color:var(--primary-color);
   border-radius: 100%;
   transition: 0.5s;
   transform: scale(1.2);
   cursor: pointer;
}
.topic-closed:hover{
   background-color: var(--text-orange);
   color: var(--default-black);

}
.topic-modal-paragraph{
   padding: 2%;
   border: 1px solid #5c5757;
   max-width: 100%;
   margin: 2%;
   border-radius: 10px;
   color: var(---link-a-color);
   opacity: 1;
}

/* -------------------feature blog------------------------- */

#feature-blog{
   max-width: 100%;
   margin-top: -1.5%;
   height:auto;
  
   background-color: var(--secondary-color);
  padding: 15px 25px;
   position: relative;
   border-radius: 10px;
   display: block;
   overflow: hidden;
   animation: zoom 0.5s , linear;
   border: 1px solid rgba(117, 115, 115, 0.178);
   border-radius: 15px;
   box-shadow: rgba(60, 60, 65, 0.2) 0px 7px 29px 0px;
}
#feature-blog h4{
   font-size: var(--font-h4);
   font-weight: 700;
   transition: var(--transition-1);
}
#feature-blog h4:hover{
   font-weight: 500;
}
#feature-blog p{
   font-size: var(--font-p);
   font-weight: 300;
   margin: 10px 0;
}
.feature-blog-container{
   max-width: 100%;
   height: auto;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: space-between;
   gap: 30px;
   margin-top: 35px;

}
.feature-blog-left{
   border: 1px solid #5754548c;
   border-radius: 10px;
   width: 70%;
   max-width: 100%;
   position: relative;
   padding: 5px 15px;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.myBtn-container{
   margin: 15px auto;
   padding: 30px;
   max-width: 100%;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   justify-content: center;
   align-items: center;
   gap: 15px;
}
.myBtn-container .feature-btn{
   background: none;
   font-size:var(--font-8);
   color: var(--primary-text-color);
   background-color:var(---t-link);
   padding: 5px 20px;
   border: 1px solid var(--primary-text-color);
   border-radius: 25px;
   font-weight: 700;
   transition: var(--transition-1);
   text-align: center;
   width: 100%;
   
}
.myBtn-container .feature-btn:hover,
.feature-btn.feature-active{
   border: 1px solid var(---link-a-color);
   color: var(---link-a-color);
}
.feature-active::before{
   content: '';
   position: absolute;
   width: 10px;
   margin: 0 auto;
   max-width: 100%;
   height: 2px;
   background: var(--gradient-2);
   bottom: -6px;
   left: 50%;
   margin-left: -10px;
   transition: var(--transition-2);

}
.feature-active:hover::before{
   width: 25px;
}
.feature-btn.feature-active{
 font-weight: 600;
 position: relative;
}
.feature-blog-left .feature-category{
   max-width: 100%;
   height: 100vh;
   margin: 0 auto;
  display: flex;
  flex-direction: column;
   gap: 15px;
   padding: 10px;
   overflow: scroll;
   overflow-x: hidden;
   animation: zoom 0.8s , linear;
}
.feature-category::-webkit-scrollbar{
   width: 1px;
}

.feature-category .column{
   box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(15, 122, 228, 0.15) 0px 0px 0px 1px;
   width: 100%;
   max-width: 100%;
   padding: 5px;
   background-color: transparent;
   display: none;
   border: 1px solid #504c4c;
   transition: var(--transition-2);
   animation: zoom 0.3s , linear;
   
}

 .column.show {
    display: flex; /* Show elements with the 'show' class */
  }
.column img{
   width: 250px;
   max-width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 3px;
   transform: scale(1);
   transition: var(--transition-1);
   
}
.column img:hover{
   transform: scale(1.02);

}
#total-blog{
   padding: 5px 10px;
   display: inline-block;
   margin-bottom: 20px;
   margin-left: 15px;
   background-color: transparent;
   border: 1px solid var(--text-orange);
   border-radius: 15px;
   font-size: var(--font-a);
   font-weight: 600;
   background-color:var(--secondary-color) ;
   position: relative;
   transition: var(--transition-2);
   
}
#total-blog:hover{
   color:var(--text-orange) ;
   border: 1px solid var(--primary-text-color) ;
}

.feature-scroll{
   top: 40px;
}
.feature-blog-container .decor-img{
   position: absolute;
   top: 150px;
   left: 80px;
   opacity: 0.2;
    /* animation: bgDecoration 6s linear infinite alternate;  */
   animation: heroDecoration 4s linear infinite alternate;
}
/* ------------------------------------------------------------------- */
  .feature-category .category2,
.feature-category .category1,
.feature-category .category3{
   max-width: 100%;
   margin: 0 auto;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: 15px;
   padding: 5px 15px 5px 5px;
   border-radius: 6px;
   border: 1px solid var(--primary-color);
   
} 
.column .column-content{
   display: flex;
   flex-direction: column;
   gap: 15px;
   max-width: 100%;
   margin: 0 auto;
   
}
.column-content .tips-tool{
   text-transform: capitalize;
   font-size: var(--font-8);
   font-weight: 200;
   padding: 3px 15px;
   background-color:var(--secondary-color)  ;
   max-width: 100%;
   width: 40%;
   text-align: center;
   border-radius: 15px;
   color: var(--primary-text-color);
   margin-top: 5px;
   font-weight: 600;
   border: 1px solid  var(--text-orange);
   transition: var(--transition-1);
}
.column-content .tips-tool:hover{

   border: 1px solid var(--primary-text-color) 
}
.column-content .tips-h6{
   font-size: var(--font-h6);
   font-weight: 600;
   line-height: 23px;
   color: var(--primary-text-color);
   opacity: 0.8;
   text-transform: capitalize;
   transition: var(--transition-1);
}.column-content .tips-h6:hover{
   font-weight: 500;
}
.column-text .seemore-btn{
   color:var(--text-orange);
   display: inline;
   font-weight: 600;
   transition: var(--transition-1);
}
.column-text .seemore-btn:hover{
   color:var(--primary-text-color);
}
.column-content .column-foot{
   max-width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-top: -15px;
   margin-bottom: 10px;
   font-weight: 500;
   opacity: 0.6;
   font-size: var(--font-8);
   transition: var(--transition-1);
}
.column-content .column-foot:hover{
   opacity: 0.8;
} 
.column-content .column-text{
   font-size: var(--font-6);
   font-weight: 500;
   color: var(--primary-text-color);
   opacity: 0.8;
   
}

/* ------------------------------------------------------ */
.feature-blog-right{
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   width: 30%;
   margin: 0 auto;
   max-width: 100%;
   height: auto;
   padding: 25px 3px;
}
.feature-blog-right h6{
   font-size: var(--font-p);
   font-weight: 600;
   text-transform: capitalize;
   margin: 15px;
   padding: 5px 0;
   border-bottom: 1px solid var(--primary-color);
   color:var(--primary-text-color) ;
   position: relative;
}
.new-post-container{
   display: flex;
   flex-direction: column;
   justify-items: center;
   align-items: center;
   padding: 15px 10px;
   height: 110vh;
   overflow: scroll;
   overflow-x: hidden;
   border: 1px solid var(--primary-color);
   border-radius: 10px;
}
.new-post-container::-webkit-scrollbar{
   width: 1px;
}
.new-post-card{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items:flex-start;
   max-width: 100%;
   width: 100%;
}

.new-post-card .post-card-head{
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 5px;
   margin-bottom: 10px;
   padding: 5px;
   cursor: pointer;
   transition: var(--transition-1);
   transform: scale(1);
   position: relative;
}
.new-post-card .post-card-head:hover{
   box-shadow: rgb(21, 32, 44) 0px 10px 50px -10px;
   transform: scale(1.01);
   border: 1px solid var(--primary-color);
}
.post-card-head img{
   border-radius: 50%;
   width:60px ;
   height:60px ;
}
.post-card-head p#post-card-text{
   font-size: var(--font-9);
   font-weight: 500;
   line-height: 16px;
   text-transform: capitalize;
   padding-left: 15px;
}
.post-card-down{
   max-width: 100%;
   margin: 0 auto;
   display: flex;
 
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--primary-color);
}
.post-card-down span{
   font-size: var(--font-a);
   color:var(--default-white) ;
   opacity: 0.5;
   text-transform: capitalize;
   font-weight: 600;
   word-spacing: 2px;
   max-width: 100%;
}
.upcoming-btn{
   text-align: center;
   font-size: var(--font-a);
   text-transform: capitalize;
   color: var(--primary-text-color);
   position: relative;
   padding: 5px;
   border: 1px solid var(--primary-text-color);

   font-weight: 500;
   border-radius: 20px;
   background-color:var(--primary-color);
   width: 50%;
   max-width: 100%;
   margin: 0 auto;
   margin-top: 10px;
   transition: var(--transition-1);
}
.upcoming-btn:hover{
   color: var(--text-orange);
}





/* ----------------------------------------
=============work templete css  ==============
-------------------------------------------*/
#worktemplete{
   
   max-width: 100%;
   height: auto;
   margin-top: 30px;
   margin-bottom: 2%;
   padding: 15px;
   border: 1px solid rgba(117, 115, 115, 0.178);
   border-radius: 5px;
   box-shadow: rgba(60, 60, 65, 0.2) 0px 7px 29px 0px;
}
#worktemplete h2{
   max-width: 100%;
   margin: 2% ;
   position: relative;
   font-weight: 700;
   transition: var(--transition-1);

}
#worktemplete h2:hover{
   font-weight: 600;
}
#worktemplete .work-text{
   margin-bottom: 20px;
   font-weight: 500;
   word-spacing: 2px;
   font-size: var(--font-p);
   opacity: 0.7;
   margin: 2% 2% 5%;
}
.worktemplete-container{
   max-width: 100%;
   margin: 0 auto;
   height: auto;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin-top: 30px;
   position: relative;
}
.worktemplete-container .worktemplete-card{
   border: 1px solid var(--primary-text-color);
   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
   padding: 15px;
   border-radius: 10px;
   max-width: 100%;
}
.worktemplete-card .work-img{
   width: 100%;
   max-width: 100%;
   margin: 0 auto;
   height: auto;
   border-radius: 8px;
   transform: scale(1);
   transition: var(--transition-1);
   margin-bottom: 15px;
}
.worktemplete-card .work-img:hover{
   transform: scale(1.02);
}
.work-card-content{
   max-width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   padding: 0 10px;
   margin-bottom: 10px;
}
.work-card-content .work-desc{
   display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  margin-bottom: 10px;
  
}
.work-desc p:first-child{
   font-size: 0.9rem;
   font-weight: 500;
   word-spacing: 5px;
   transition: var(--transition-1); 
   opacity: 0.5;  
}
.work-desc p:last-child{
   font-size: 0.9rem;
}
.work-desc p:hover{
   
   opacity: 0.8;
}
.work-desc p i{
   color:var(--text-orange);
   padding-right: 5px;
}
.work-card-content h5{
   font-weight: 600;
   text-transform: capitalize;
   color:var(--primary-text-color) ;
   margin-bottom: 20px;
   letter-spacing: 1px;
   transition: var(--transition-1);
}
.work-card-content h5:hover{
   opacity: 0.8;
}
.work-card-content .work-end{
   position: relative;
   display: flex;
   width: 100%;
   gap: 10px;
   margin-bottom: 5px;
}
.work-end span{
   background-color:var(--secondary-color);
   padding: 5px 14px;
   border-radius: 10px;
   font-size: var(--font-a);
   font-weight: 500;
   color: var(--primary-text-color);
   box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
   text-transform: capitalize;
   transition: var(--transition-1);
   border: 1px solid var(--primary-color);
}
.work-end span:hover{
   border: 1px solid #000;

}
.work-end .work-end-btn{
   padding: 0 20px;
   max-width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   
   color:var(--default-black) ;
   font-size: var(--font-a);
   font-weight: 800;
   text-align: center;
   border-radius: 30px;
   letter-spacing: 1px;
   text-transform: capitalize;
   background-color: var(--default-white);
   transition: var(--transition-1);
   border: 1px solid var(---link-a-color);
}
.work-end .work-end-btn:hover{
   color: var(--default-white);
   background-color: var(--default-black);
   border: 1px solid var(---link-a-color);
}
.work-card-content .work-link{
   width: 30px;
   position: absolute;
   bottom: 2px;
   right: 10px;
   padding: 5px;
   background:var(--default-white);
   cursor: pointer;
   border-radius: 5px;
   border: 1px solid rgb(12, 230, 12);
   transition: var(--transition-1);
}
.work-card-content .work-link:hover{
   border: 1px solid var(--text-orange);
}
.work-card-content .work-link img{
   transform: scale(1);
   transition: var(--transition-1);
}
.work-card-content .work-link img:hover{
   transform: scale(1.1);
}
.work-explore-btn{
   align-items: center;
   
   color:var(--default-black);
   background: none;
   background-color: var(--default-white);
   margin: 4% auto;
   margin-bottom: 15px;
   padding: 10px 25px;
   border: 0;
   outline: 0;
   font-weight: 600;
   font-size:var(--font-a);
   border-radius: 30px;
   text-transform: capitalize;
   cursor: pointer;
   border: 1px solid transparent;
   transition: var(--transition-1);

}
.work-explore-btn:hover{
   border: 1px solid var(--text-orange);
   background-color: var(--default-black);
   color: var(--default-white);
}
.work-explore-btn span{
   display: inline-block;
   position: relative;
   transition: 0.3s;
   

}
.work-explore-btn span::after{
   content: '\2193';
   position: absolute;
   opacity: 0;
   top: -10px;
   right: 5px;
   font-size: var(--font-btn);
   font-weight: 800;
   transition: 0.3s;
   color: var(---link-a-color);
   
}
.work-explore-btn:hover span{
   padding-right: 25px;
   
}
.work-explore-btn:hover span::after{
   opacity: 1;
   right: 0;
}


#more-work-templete{
   max-width: 100%;
   margin: 0 auto;
   margin-top: 30px;
   display: none;
   animation: zoom 0.7s , linear;
}
#more-work-templete .more-work-container{
   width: 100%;
   display: grid;
   margin-top: 35px;
   grid-template-columns: repeat(3, 1fr);
   gap: 15px;
}
.more-card{
   border: 1px solid var(--primary-color);
   padding: 7px;
   
   border-radius: 8px;
   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px
}
.more-card .more-word-img{
   border-radius: 10px;
   padding: 5px;
}
.work-card-content .more-work-desc{
   margin-top:-2px;
}
.more-work-desc > p{
   font-size: 0.8rem;
   font-weight: 200;
   padding: 0 -10px;
}
.work-card-content .more-h5{
   line-height: 22px;
   font-size: var(--font-btn);
}
.work-card-content .more-work-end{
   font-size: var(--font-a);
   display: flex;
   width: 100%;
   justify-content: space-around;
   align-items: center;
   margin-bottom: 15px;
}
.more-work-end span{
   padding: 5px 10px;
   background-color: var(--primary-color);
   border: 1px solid var(--primary-text-color);
   border-radius: 30px;
   font-weight: 600;
   color: var(--primary-text-color);
   transition: var(--transition-1);
}
.more-work-end span:hover{
   border: 1px solid var(--text-orange);
   background-color: transparent;
}
.more-work-end-btn{
   color:var(--default-black) ;
   background-color: var(--default-white);
   padding: 5px 10px;
   border: 1px solid transparent;
   border-radius: 30px;
   font-weight: 800;
   transition: var(--transition-1);  
}
.more-work-end-btn:hover{
   color: var(--default-white);
   background-color: var(--default-black);
   border: 1px solid #000

}







/* ----------------------------------------
=============contact css  ==============
-------------------------------------------*/
 #contact{
   background-color: var(--secondary-color);
   padding: 1% ;
   padding-top: 5%;
   margin-top: 4%;
   max-width: 100%;
   border-radius: 8px;
   position: relative;
   border: 1px solid rgba(117, 115, 115, 0.178);
   border-radius: 25px;
   box-shadow: rgba(60, 60, 65, 0.2) 0px 7px 29px 0px;
  
 }
 #contact h5{
  position: absolute;
  text-transform: capitalize;
  top: 22px;
  left: 15%;
  font-size: var(--font-h5);
  font-weight: 600;

 }
 .q-mark-img{
   position: absolute;
   top: 22px;
  left: 45%;
  animation: msg-icon 2s linear infinite alternate;
 }
 #contact .contact-me{
   max-width: 100%;
   height: auto;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items:flex-start;
   gap: 25px;
   padding: 10px;
 }
 .contact-me .accordion-container{
   
   max-width: 100%;
   width: 60%;
   height: auto;
   margin:  0 auto;
   padding: 5px ;
   border-radius: 5px;
   border: 1px solid #f5f5f51f;
   box-shadow: rgba(53, 50, 50, 0.35) 0px 5px 15px;
   
}

.accordion-container .accordion-btn{
   width: 100%;
   background: none;
   border: 1px solid var(--primary-text-color);
   margin: 2px auto;
   background:var(--gradient-1);
   text-align: left;
   padding:  10px;
   font-weight: 600;
   border-radius: 8px;
   font-size: var(--font-p);
   color:var(--default-white) ;
  
} 
.accordion-btn::after{
   content: '+';
   float: right;
   margin-right: 10px;
   font-size: var(--font-p);
}
.accordion-card{
   padding: 0 5px;
   background-color:var(--secondary-color);
   transition: 0.4s;
   height: auto;
   max-height: 0;
   max-width: 100%;
   overflow: hidden;
}
.accordion-card p{
   padding: 10px;
  font-size: var(--font-9);
  font-weight: 500;
  line-height: 20px;
  color:var(--primary-text-color) ;
  border: 1px solid var(--primary-color);
  border-radius: 8px;
}
.accordion-card ol{
   width: 100%;
   
   
}
.accordion-card ol li{
   padding:0 5px;
   margin-bottom: 5px;
   font-size: var(--font-8);
   list-style: circle;
   margin-left: 20px;
   
}
.accordion-card ol li span{
   font-weight: 700;
   color:var(--text-orange);
}
.acc-on::after{
   content: '-';
  color:var(--text-orange) ;
  font-size: var(--font-btn);
  font-weight: 200;
}
.contact-me .contact-container{
   max-width: 100%;
   width: 40%;
   height: auto;
   margin:  0 auto;
   padding: 5px;
   border-radius: 5px;
   border: 1px solid #746f6f6b;
   position: relative;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.contact-container h6{
   position: absolute;
   text-transform: capitalize;
   font-size: var(--font-h5);
   font-weight: 600;
   top: -55px;
   right: 42%;
 
}
.contact-container .m-mark-img{
   position: absolute;
   top: -60px;
   right: 27%;
   animation: msg-icon 2s linear infinite alternate;
}
.contact-form{
   max-width: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 15px;
   box-shadow: rgba(236, 230, 230, 0.075) 0px 5px 15px;
}
.contact-form p{
   font-size: var(--font-8);
   font-weight: 600;
   text-align: left;
   padding: 5px 10px;
   padding-top: 15px;
}
.contact-form form{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 10px;
   position: relative;
   
}
form input,
form textarea{
   width: 100%;
   max-width: 100%;
   resize: none;
   padding: 10px;
   border: 0;
   background-color:#fff ;
   border-bottom: 1px solid #27272736;
   border-radius: 3px;
   outline: 0;
   font-size: var(--font-9);
   font-weight: 500;
   transition: var(--transition-1);
   position: relative;
   font-family: "Manrope", sans-serif;

}

form input:focus,
form textarea:focus{
   border-bottom: 1px solid #00000069;
}
form input::placeholder,
form textarea::placeholder{
   color: var(--text-orange);
   font-size: var(--font-8);
   opacity: 0.9;
   word-spacing: 2px;
   font-family: "Manrope", sans-serif;
}
form #input-submit-btn{
   border: 0;
   background: none;
   background:var(--text-orange) ;
   cursor: pointer;
   font-weight: 700;
   color: var(--primary-text-color);
   font-size: var(--font-p);
   transition: var(--transition-1);
   border: 1px solid transparent;
}
form #input-submit-btn:hover{
 
  border: 1px solid transparent;
  background:var(--gradient-1) ;
  color:var(--primary-text-color);
  font-weight: 600;

}

#m-mark-envelop,
#m-mark-user{
   position: absolute;
   z-index: 1;
   opacity: 0.5;
   cursor: none;
}
#m-mark-envelop{
   top: 53px;
   
   right: 10px;
   
}
#m-mark-user{
   top: 8px;
   right: 10px;

}

.contact-form .contact-toast-box{
   box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
   padding: 10px 8px;
   max-width: 70%;
   width: 100%;
   color:#000 ;
   display: none;
   justify-content: center;
   align-items: center;
   gap: 8px;

  position: absolute;
   bottom: 80px;
   left: 50px;
   border-radius: 5px;
   animation: zoom 0.3s , linear;
   background-color:#fff ;
}
.contact-toast-box i{
   color: #fff;
   background-color: rgb(43, 129, 43);
   padding: 4px;
   font-size: 9px;
   border-radius: 50%;
   opacity: 1;
}
.contact-toast-box-submit{
   font-weight: 600;
   opacity: 0.9;
   animation: zoom 0.3s , linear;
   
}
span.contact-denger{
   font-size: var(--font-9);
   text-transform: capitalize;
   color: var(--text-orange);
   display: none;
   animation: zoom 0.3s , linear;
   text-align: center;
   padding: 0 0 5px 0 ;

}





/* ----------------------------------------
=============testimonial css  ==============
-------------------------------------------*/

#testimonial{
   max-width: 100%;
   height: auto;
   padding: 20px 10px;
   border: 1px solid rgba(117, 115, 115, 0.178);
   border-radius: 5px;
   box-shadow: rgba(60, 60, 65, 0.2) 0px 7px 29px 0px;
}
.testimonial-container{
   max-width: 100%;
   display: flex;
   
   overflow-x: scroll;
}
.testimonial-container::-webkit-scrollbar{
   display: none;
}
.testimonial-card{
   width: 100%;
   display: grid;
   grid-template-columns: auto auto auto ;
   grid-gap: 2px;
   flex: none;
   animation: 70s slider infinite linear;
   
   
   
}
.testimonial-card .testimonial-body{
   max-width: 100%;
   margin: 0 10px;
  border: 1px solid var(--primary-text-color);
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
   transition: var(--transition-1);
   transform: scale(1);
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   background-color:#4e4a4a18;

   
}
.testimonial-card .testimonial-body:hover{
   box-shadow: rgba(63, 62, 62, 0.35) 0px 5px 15px;
   transform: scale(1.02);
   border: none;
}
.testimonial-body q{
   font-size: var(--font-9);
   font-weight: 500;
   letter-spacing: 1px;
   padding: 8px 4px;
   margin: 10px 0;
   opacity: 0.8;
   transition: var(--transition-1);
   
}
.testimonial-body q:hover{
   opacity: 1;
}

.testimonial-contents img{
   width: 70px;
   height: 70px;
   max-width: 100%;
   object-fit: cover;
   border-radius: 50%;
   padding: 2px;
   border: 1px solid var(--text-orange);
   margin:15px 5px ;
   transition: var(--transition-1);
   transform: scale(1);
}
.testimonial-contents img:hover{
   transform: scale(1.02);
   border: 1px solid var(--primary-text-color);
}
.testimonial-contents{
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   gap: 20px;
   max-width: 100%;
   margin: 0 auto;
  
}

.testimonial-contents .textimonial-heading{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   margin-left: 15px;

}
.textimonial-heading .t-name{
   font-size: var(--font-p);
   color: var(--primary-text-color);
   font-weight: 600;
   transition: var(--transition-1);
}
.textimonial-heading .t-name:hover{
   font-weight: 700;
}
.textimonial-heading .t-title{
   font-size: var(--font-8);
   color:var(--primary-text-color);
   font-weight: 500;
   opacity: 0.8;
   letter-spacing: 1px;
   transition: var(--transition-1);
}
.textimonial-heading .t-title:hover{
   opacity: 0.9;
}
.textimonial-heading .starts{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 2px;
   margin-top: 5px;
   transition: var(--transition-1);
}
.textimonial-heading .starts:hover{
   opacity: 0.9;
}
.starts i{
   font-size: var(--font-a);
   font-weight: 600;
   padding: 0 1px;
   color: rgb(250, 135, 4);
}



/* @keyframes slider{
   from{
       transform: translateX(0);
   }
   to{
       transform: translateX(-100%);
   }
} */

 /* ========================= main ends here========================= */


 /* ========================= footer start here========================= */

  /* ----------------------------------------
=============footer fundamental CSS  ==============
-------------------------------------------*/
#footer{
   max-width: 100%;
   margin-top: 80px;
   height: auto;
   background-color:rgb(192, 49, 6);
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   border-radius: 15px;
   border: 1px solid var(--text-orange);
   padding: 15px;
   margin-bottom: 20px;
}
#footer .footer-container{
   max-width: 100%;
   height: auto;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(3,1fr);
   justify-content: flex-start;
   align-items: flex-start;
   grid-gap: 15px;
   padding: 15px;
   position: relative;
   border-bottom: 1px solid var(--default-white);
   border-radius: 10px;
}
.footer-container .footer-card{
   margin: 25px;
   padding: 3px;
   max-width: 100%;
   height: auto;
   width: 100%;
   
}
.footer-card .footer-logo{
   width: 50px;
   height: 50px;
   object-fit: cover;
   border-radius: 50%;
   margin: 10px 15px;
   padding: 2px;
   transition: var(--transition-1);
   transform: scale(1);
   cursor: pointer;
   animation: msg-icon 2s linear infinite alternate;
   border: 1px solid var(--text-orange);
   box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

}
.footer-card .footer-logo:hover{
   transform: scale(1.03);
  
}
.footer-card .footer-p{
   font-size: var(--font-9);
   max-width: 100%;
   margin: 0 auto;
   font-weight: 600;
   color:var(--primary-text-color) ;
   background-color:var(--default-black);
   opacity: 1;
   line-height: 25px;
   transition: var(--transition-1);
   text-align: left;
   box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
   padding: 10px;
   padding-bottom: 25px;
   padding-top: 35px;
   border-radius: 5px;
}
.footer-card .footer-p:hover{
   opacity: 1;
}
.footer-card h6{
   text-transform: capitalize;
   font-size: var(--font-h6);
   font-weight: 600;
   margin: 10px 0;
   opacity: 0.9;
   position: relative;
   cursor: pointer;
   color: #fff;
   transition: var(--transition-1);
}
.footer-card h6:hover{
   opacity: 1;
}
.footer-category{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 15px;
   max-width: 100%;
   margin: 0 auto;
   margin-top: 10%;
}
.footer-category .footer-card-link{
   max-width: 100%;
   padding: 8px 4px;
   display: flex;
   flex-direction: column;
}
.footer-card-link a{
   color: #fff;
   font-size: var(--font-9);
   font-weight: 600;
   text-transform: capitalize;
   margin: 5px;
   max-width: 100%;
   display: block;
   padding: 1px 0;
   opacity: 0.7;
   transition: var(--transition-1);
}
.footer-card-link a:hover{
   color:var(--default-white) ;
   font-weight: 500;
}
.footer-card .footer-address{
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   max-width: 100%;
   margin: 0 auto;
   gap: 15px;
}
.address-bar address{
   display: flex;
   flex-direction: column;
   font-size: var(--font-a);
   font-weight: 600;
   margin: 10px 0;
   opacity: 0.7;
   color: #fff;
   transition: var(--transition-1);
}
.address-bar address:hover{
   opacity: 1;
}
.footer-address #my-social{
   display: flex;
   justify-content: center;
   align-items: center;
   max-width: 100%;
   gap: 5px;

   
}
#my-social a:not(:last-child){
   margin: 2px;
   padding: 2px 6px;
   color: #fff;
   font-size: var(--font-btn);
   transform: scale(1);
   transition: var(--transition-1);
   border-radius: 50%;
}
#my-social a:hover{
   transform: scale(1.02);
   
}
.footer-address .quotes{
   font-size: var(--font-8);
   font-weight: 600;
   color:var(--primary-text-color) ;
   opacity: 0.9;
   margin-top: 2px;
   transition: var(--transition-1);
   padding: 0 10px 0 0;
   text-align:left;
   max-width: 100%;
}
.footer-address .quotes:hover{
   opacity: 1;
}
#copywrites{
   max-width: 100%;
   margin: 0 auto;
   text-align: center;
   margin-top: 15px;
   margin-bottom: 25px;
   font-size: var(--font-p);
   font-weight: 300;
   color: #ffffffa2;
   opacity: 0.9;
   text-transform: capitalize;
   transition: var(--transition-1);
}
#copywrites:hover{
   opacity: 1;
}
#copywrites span{
   font-weight: 800;
   color: #500612 ;
}
.address-img{
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 5px;
   margin-top: -5px;
}
.submit-toast-box{
   max-width: 210px;
   padding:13px 10px;
   
   height: auto;
   position: relative;

   border-radius: 5px;
   display: none;
   
}
.submit-toast-body{
display: flex;
align-items: center;
justify-content: space-around;
gap: 5px;
}
.submit-toast-body i{
   color: green;
   font-size: var(--font-btn);
}
.submit-toast-body span{
   font-size: var(--font-8);
}



 /* ----------------------------------------
=============other fundamental CSS  ==============
-------------------------------------------*/
 .top-scroll{    
   position: fixed;
   bottom: 25px;
   right: 25px;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   cursor: pointer;
   background-color: var(--text-orange);
   pointer-events: none;
   opacity: 0;
   transition: var(--transition-1);
   z-index: 1;
   scroll-behavior: smooth;

}
.top-scroll:hover{
   box-shadow: #0ea4ea63 0px 3px 8px;

}

.top-scroll i{
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   cursor: pointer;
   pointer-events: auto;
   transition: 0.3s;
   font-size: var(--font-a);
}
.top-scroll i:hover{
   margin-top: -3px;
}
.top-scroll.active{
   opacity: 1;
   pointer-events: auto;
   bottom: 38px;
}

.msg-box{
   position: fixed;
   bottom: 70px;
   right: 25px;
   cursor: pointer;
   transition: var(--transition-1);
   animation: msg-icon 2s linear infinite alternate;
  
}
@keyframes msg-icon {
   0%{transform: translateY(3px) }
   100%{transform: translateY(0);}
}
.msg-box:hover{
   bottom: 73px;
}
#msg{
   position: relative;
}

#msg .msg-tooltips{
   visibility: hidden;
   width: 180px;
   background-color:#fff;
   border: 1px solid var(--default-white);
   color: #000;
   text-align: center;
   border-radius: 6px;
   padding:10px 15px  ;
   position: fixed;
   z-index: 1;
   bottom: 70px;
   right: 7%;
   margin-left: 60px;
   font-size: var(--font-8);
   font-weight: 700;
   opacity: 0;
   transition: opacity 0.3s;
}
.msg-tooltips .smile{
   display: none;
}
#msg .msg-tooltips::after {
   content: "";
   position: absolute;
   top: 70%;
   right: -6px;
   margin-right: -10px;
   border-width: 5px;
  
   border: 8px solid transparent;
   border-left-color: var(--default-white);
 }
 
 #msg:hover .msg-tooltips {
   visibility: visible;
   opacity: 1;
 }
.msg-modal-box{
   background-color:rgb(7, 26, 44);
   max-width: 320px;
   height: auto;
   position: fixed;
   padding-top: 15px;
   bottom: 40px;
   right: 60px;
   border-radius: 5px;
   display: none;
   z-index: 3;
   animation: zoom 0.3s , linear;
   border: 2px double #fff;
   animation: toast 10s linear infinite alternate;

}
.modal-box-form{
   padding: 2px;
   max-width: 100%;
   margin: 0 auto;
   position: relative;
   margin-top: 40px;
}
.modal-box-form .top-form{
   background-color: var(--text-orange);
   top: -50px;
   padding: 3px 5px;
   border-radius: 8px;
   right: 10px;
   position: absolute;
   width: 200px;
   max-width: 100%;

}
.top-form img.sent-img{

   animation: toast 2s linear infinite alternate;
}

    
 
 @keyframes toast {
    0%{transform: translateX(8px) }
    100%{transform: translateX(0);}
 }
    
 
.top-form span.id{
   font-size: var(--font-8);
   margin-top: -3px;
   font-weight: 600;
   padding: 1px 5px;
   display: block;
   color: #fff;
}
.modal-box-form #msg-dlt{
   position: absolute;
   top: -60px;
   right: -5px;
   z-index: 1;
   cursor: pointer;
   animation: zoom 0.3s , linear;
   transition: var(--transition-1);
   transform: scale(1);
}

.modal-box-form #msg-dlt:hover{
   transform: scale(1.07);
}

.modal-box-form form{
   max-width: 100%;
}
.modal-box-form form input,
.modal-box-form form textarea{
   background-color:#fff ;
   color: #000;
   border-bottom: 1px solid #dad1d1;
   text-transform: none;
   border-radius: 5px;
   margin: 2px;
   width: 100%;
   padding: 5px 10px;
   font-family: "Manrope", sans-serif;
   font-weight: 500;
}
.modal-box-form form input::placeholder,
.modal-box-form form textarea::placeholder{
   color:var(--text-orange);
   font-weight: 600;
   opacity: 0.8;
   animation: zoom 0.5s , linear;

}
#modalSubmit{
   background-color:var(--text-orange) ;
   border-radius: none;
   max-width: 100%;
   margin:0px auto;
   color:#fff;
   font-weight: 800;
   width: 100%;
   cursor: pointer;
   transition: var(--transition-1);
   animation: zoom 0.5s , linear;
   border: 1px solid transparent;
}
#modalSubmit:hover{
   background:var(--gradient-1);
   color: #000;
   border: 1px solid #fff;
}
#msg-snakebar{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-bottom: 5px;
}
#msg-snakebar span{
   padding: 5px 0;  
   font-size: var(--font-8);
   font-weight: 400;
   
}
#msg-snakebar span.toast-box-danger{
   color:var(--text-orange) ;
   text-transform: capitalize;
   font-weight: 600;
   display: none;
   animation: zoom 0.3s , linear;
}
#msg-snakebar .toast-box{
   box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
   padding: 3px 8px;
   color:#000 ;
   display: none;
   justify-content: center;
   align-items: center;
   gap: 8px;
   border-radius: 5px;
   animation: zoom 0.3s , linear;
   background-color: #fff ;
}
.toast-box i{
   color: #fff;
   background-color: rgb(43, 129, 43);
   padding: 4px;
   font-size: 9px;
   border-radius: 50%;
}
.toast-box-submit{
   font-weight: 600;
   
   
}