@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,200&display=swap');

:root {
    --faded-white: #EDEDED;
    --nav-bg:#2E2F2E;
    --shadow-cl: 0 4px 13px rgba(115, 115, 115, 0.07);
  
  }
  .light-theme {
    --faded-white: #EDEDED;
    --nav-bg:#2E2F2E;
    --shadow-cl: 0 4px 13px rgb(0 0 0 / 5%);
    ;
  
  }

  .dark-theme {
    --faded-white: #2E2F2E;
    --nav-bg:#E4E4E4;
   
  }



    .navbody{
        background-color:var(--nav-bg);
        height:4rem;
        padding-left:4%;
        padding-right:4%;
        box-shadow: var(--shadow-cl)

       
    }
    .contactus{
        background-color: #F36F2E;
        border: 0;
        border-radius: 0;
        font-size:0.9rem;
        height:2.3rem;
        width:7.7rem;

    }
    .contactus:hover{
        background-color: #F36F2E;
        border: 0;
      

    }
    .navchildrenRight li{
        padding-left:0.9rem;
        padding-right:0.9rem;
    }
    .navchildrenmobile{
        display: block;
       
        
    }
    .navchildrenweb{
         display:none !important;
    }
   
    
    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {  
     
    }
    
    
    /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
    @media (min-width: 768px) { 
    
        .navbody{
            background-color:var(--nav-bg);
            height:5.0rem;
            padding-left:4%;
            padding-right:4%;
        }
        .contactus{
            background-color: #F36F2E;
            border: 0;
            height:2.2rem;
            width:6.7rem;
    
        }
        .contactus:hover{
            background-color: #F36F2E;
            border: 0;
          
    
        }
        .navchildrenRight li{
            padding-left:0.9rem;
            padding-right:0.9rem;
        }
        .navchildrenmobile{
            display: block;
        }
        .navchildrenweb{
            display:block !important;
       }
      
    
    }
    
    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) { 
        .navbody{
            background-color:var(--nav-bg);
            height:3.9rem;
            padding-left:5%;
            padding-right:5%;
        }
        .contactus{
            background-color: #F36F2E;
            border: 0;
            height:2.2rem;
            width:6.7rem;
    
        }
        .contactus:hover{
            background-color: #F36F2E;
            border: 0;
     
    
        }
        .navchildrenRight li{
            padding-left:0.9rem;
            padding-right:0.9rem;
        }
        .navchildrenmobile{
            display: none !important;
        }
        .navchildrenweb{
            display:block !important;
       }
      
  
    }
    
    
    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
        .navbody{
            background-color:var(--nav-bg);
            height:3.9rem;
            padding-left:5%;
            padding-right:5%;
        }
        .contactus{
            background-color: #F36F2E;
            border: 0;
            height:2.2rem;
            width:6.7rem;
    
        }
        .contactus:hover{
            background-color: #F36F2E;
            border: 0;
          
    
        }
        .navchildrenRight li{
            padding-left:0.9rem;
            padding-right:0.9rem;
        }
        .navchildrenmobile{
            display: none !important;
        }
        .navchildrenweb{
            display:block !important;
       }
     
    
    }