/* Global styles */
    body {
        font-family: 'Onest', sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }


    .contact-us {
        color: #000a20;
        text-align: left;
        font-family: "Onest-Regular", sans-serif;
        font-size: .8vw;
        font-weight: 400;
        position: relative;
      }
      

      .component-4 {
        background: #ffffff;
        border-radius: 25px;
        border-style: solid;
        border-color: #ffffff;
        border-width: 1px;
        
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 147px;
        height: 44px;
        position: relative;
        box-shadow: 0px 4px 68px 0px rgba(255, 255, 255, 0.5);
        margin-right: 5%;
    margin-top: 1%;
      }
      
        .contact-us {
        color: #000a20;
        text-align: left;
        font-family: 'Roboto-Regular', sans-serif;
        font-size: 16px;
        font-weight: 400;
        position: relative;
        }

    .logo img {
        width: 100px; /* Adjust size as needed */
    }


    .header {
        background-color: #233D4D;
        color: #fff;
        text-align: center;
        /* padding: 100px 20px; */
       /*  height: 100vh; */
    }


    .header p {
        font-size: 18px;
    }


  

    #myCanvas {
        width: 100%; /* Set canvas width to 100% of its parent element (innerDiv) */
        height: 300px; /* Set canvas height */
    }

    .header-mobile{
        display: none;
    }


    .RequestCallBackContent{
        color: #ffffff;
text-align: left;
font-family: 'Inter-SemiBold', sans-serif;
font-size: 16px;
font-weight: 600;
position: relative;

    }






    
    nav{
        top: 0px;
        height: 5rem;    justify-content: space-between;
        width: 100%;
        background: #2D2D2D6E;
        ;
        backdrop-filter: blur(15.25px);
    
        box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
    
        display: flex;
        position: fixed;
        z-index: 10000000000000000;
        justify-content: space-between;
    }
    
    /*Styling logo*/
    .logo{
        padding:1vh 1vw;
        text-align: center;
    
    }
    .logo img {
      width: 132px;
    height: 125px;
    }
    
    /*Styling Links*/
    .nav-links{
        display: flex;
        list-style: none; 
        width: 58vw;
        padding: 0 0.7vw;
        justify-content: space-evenly;
        align-items: center;
       
    }
    .nav-links li a{
            color: rgba(255, 255, 255, 0.77);
          
            font-family: 'Inter-Medium', sans-serif;
            font-size: 1vw;
            font-weight: 500;
            text-decoration: none;
           
          
            
    }
  /*   .nav-links li a:hover {
        color: #61DAFB;
    } */
    .nav-links li {
        position: relative;
    }

    .nav-links li a:hover::before{
        width: 80%;
    }
    
    /*Styling Buttons*/
    .login-button{
        background-color: transparent;
        border: 1.5px solid #f2f5f7;
        border-radius: 2em;
        padding: 0.6rem 0.8rem;
        margin-left: 2vw;
        font-size: 1rem;
        cursor: pointer;
    
    }
    .login-button:hover {
        color: #131418;
        background-color: #f2f5f7;
        border:1.5px solid #f2f5f7;
        transition: all ease-in-out 350ms;
    }
    .join-button{
        color: #131418;
        background-color: #61DAFB;
        border: 1.5px solid #61DAFB;
        border-radius: 2em;
        padding: 0.6rem 0.8rem;
        font-size: 1rem;
        cursor: pointer;
    }
    .join-button:hover {
        color: #f2f5f7;
        background-color: transparent;
        border:1.5px solid #f2f5f7;
        transition: all ease-in-out 350ms;
    }
    
    /*Styling Hamburger Icon*/
    .hamburger div{
        width: 30px;
        height:3px;
        background: #f2f5f7;
        margin: 5px;
        transition: all 0.3s ease;
    }
    .hamburger{
        display: none;
    }


.nav-active{
    font-weight: bold; color: #ffffff;
}

.contact-us-nav{
    color: #000;

}


    .contact-menu{
        background: white;
        height: 45px;
        width: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 18px;
    }

    .contact-menu{
        display: none;
                }

    @media (max-width: 767px) {

        .nav-links li a {

            font-size: 6vw;
        }

        .contact-menu{
            color: black;
            display: flex;
            justify-content: center;
            align-items: center;
          
        }
     
    }


    @media screen and (max-width: 800px) {
        .nav-links {
            position: fixed;
            background: #2d2d2d;
            height: 100vh;
            width: 100%;
            flex-direction: column;
            clip-path: circle(50px at 90% -20%);
            -webkit-clip-path: circle(50px at 90% -10%);
            transition: all 1s ease-out;
            pointer-events: none;
            margin-top: 0px;
            margin-top: 0px;
            justify-content: start;
            padding-top: 10vh;
            gap: 5vh;
        
        }
    }

    @media screen and (max-width: 800px) {
        .nav-links.open {
            clip-path: circle(1000px at 90% -10%);
            -webkit-clip-path: circle(1000px at 90% -10%);
            pointer-events: all;
            justify-content: start;
        padding-top: 10vh;
        gap: 5vh;
        }
    }

    @media (max-width: 767px) {
        .component-4 {
            display: none;
        }
    }

    @media screen and (max-width: 800px) {
        .hamburger {
            display: block;
            position: absolute;
            cursor: pointer;
            right: 5%;
            top: 50%;
            transform: translate(-5%, -50%);
            z-index: 2;
            transition: all 0.7s ease;
        }
    }

    @media screen and (max-width: 800px) {
        .logo img {
            width: 101px;
            height: 87px;
        }
    }

    @media screen and (max-width: 800px) {
        nav {
            position: fixed;
            z-index: 99999999999;
            height: 3rem;
        }
    }