/* Global Styles */

:root{
  --primary-color:#121c2e;
  --secondary-color :#1ed6c7;
  --clicked-color : #1e9aca;
  --background:linear-gradient(to right,#1ed6c7,#1e77ca);
    --font-small: .813rem;
    --font-medium: .938rem;
    --font-large: 1rem;;
    --smaller-font-size: .813rem;
    --container-size: 50px;
    --nav-img-size: 25px;
    --title-font-size: .813rem;
    --font:'Raleway', sans-serif;
    
      /*========== Font weight ==========*/
      --font-medium-weight: 500;
      --font-thin-weight : 100px;
      --font-semi-bold-weight: 400;
      --font-bold-weight: 600;
      --arrow-size: 50px;
      
  
      --container-Height-size:140px;
      --container-width-size:160px;
      
  
  }
  
  @media screen and (min-width: 768px) {
    :root {
      --font-small: .944rem;
      --smaller-font-size: .813rem;
      --font-medium: 1rem;
      --font-large: 1.2rem;;
      --container-size: 70px;
      --nav-img-size: 25px;
      --title-font-size: 1rem;
      --container-Height-size:200px;
      --container-width-size:250px;
      --arrow-size: 45px;
     
  
    }
   
  }
  @font-face {
    font-family: 'FontNormal';
    src: url('assets/font/thin.woff2') format('woff2'),
         url('assets/font/thin.woff') format('woff'),
         url('assets/font/thin.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    user-select: none;
    -webkit-user-drag: none;
    }
    
    .bottom-nav-items {
    display: flex;
    flex-direction: column;
    align-items: center;
   
    transition: transform 0.2s ease;
    }
    
    .nav-img {
    width: var(--nav-img-size);
    height:var(--nav-img-size);
    margin-bottom: 5px;
    background-color: var(--primary-color);
    padding: 7px;
    border-radius: 50px;
    transition: opacity 0.2s ease;
    }
    
    .nav-title {
    color: var(--primary-color);
    font-size: var(--title-font-size);
    margin-bottom: 0;
    font-size: var(--font-small);
    font-weight: var(--font-medium-weight);
    transition: color 0.2s ease;
    }
    
    .nav-title.active {
    color: var(--clicked-color);
    }
    .nav-img.active {
    color: var(--secondary-color);
    background-color: var(--secondary-color);
    padding: 4px;
    border-radius: 50px;
      }
    .bottom-nav-items:hover {
    transform: scale(1.1);
    }
    
    .bottom-nav-items:hover .nav-img {
    opacity: 0.8;
    background-color: var(--secondary-color);
    padding: 4px;
    border-radius: 50px;
    }
    
    .bottom-nav-items:hover .nav-title {
    color: var(--secondary-color);
    }
    
    .bottom-nav-items:active {
    transform: scale(0.9);
    }
    
    .bottom-nav-items:active .nav-img {
    opacity: 0.6;
    }
    
    .bottom-nav-items:active .nav-title {
    color: var(--secondary-color);
    }

    
.nav_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
  }
  
  .logo_name {
    color:  white;
    text-decoration: none;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium-weight);
   
  }
  
  .nav_menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .back_img{
    width: var(--arrow-size);
    height: var(--arrow-size);
    padding: 10px;
  }

  .back_img:hover{
    background-color:  rgba(0, 0, 0, 0.2);
    border-radius: 50%;
  }
  
  
  
  
  @media screen and (min-width: 480px) {
    .nav_list  {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  
    }
    .nav-wrapper{
      display: none;
    }

    .logo_title{
      display: none;
      text-transform: capitalize;

    }
    
   
  }

  .logo_title{
  color:  white;
  text-decoration: none;
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium-weight);
  }
  
  @media screen and (max-width: 480px) {
    .nav_list  {
      display: none;
  
    }
    .nav-wrapper{
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-top: 10px;
    background-color: #ffffff;
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    }
  }
  
  .nav_items {
    margin-right: 20px;
  }
  
  
  .nav_items a {
    color: white;
    text-decoration: none;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium-weight);
    transition: color 0.2s ease;
  }
  
  .nav_items a:hover {
    color:  var(--clicked-color);
  }
  .nav_items a:active{
    border-bottom: 1px solid white;
    color:  var(--secondary-color);
  }

  

  .links:hover {
    color: var(--clicked-color);
  }
  .links {
    color: white;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .nav_items.active{
    color:var(--clicked-color);
  }