@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@300&family=Roboto:wght@300;900&display=swap');

*
        {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body
        {
            overflow: hidden;
            background: rgba(223, 221, 221, 0.699);
        }
       #scene,canvas
       {
        position: absolute;
           width: 100%;
           /* margin: 5% 0; */
           padding-top: 2%;
           background: transparent;
           height: 120vh;

       }
       .main
       {
           width: 100vw;
           min-height: 100vh;
       }
       
       .bar
       {
           width: 100vw;
           height: 70px;
           padding:0 30px;
           padding-top: 20px;
           
           display: flex;
           align-items: center;
           justify-content: space-between;
           font-family: 'Montserrat',sans-serif;
           color: #807e7e;
        
       }
       .bottombar
       {
           position: absolute;
           bottom: 20px;
       }
       .logo
       {
           width: 60px;
           height: 60px;
       }
       .left
       {
           width: 60px !important;
           overflow: visible;
           
       }
       .logo img
       {
           width: 100%;
           height: 100%;
       }
       .page
       {
           transform: rotate(-90deg);
           cursor: pointer;
           transition: all 0.3s ease;
           color: #000;
           
       }
       .closebtn
       {
           color:#807e7e !important ;
       }
      .bar .page:hover
       {
           transform:rotate(-90deg) translateX(-10px);
           
       }
       .bottombar .page:hover
       {
           transform:rotate(-90deg) translateX(10px);
           
       }
      .bottombar .social
      {
          display: flex;
          flex-direction: column;
            
      }
    
      .bottombar .social a

      {
          text-decoration: none;
          color: inherit;
        font-size: 16px;
        cursor: pointer;
      }
      .bottombar .social a:hover
      {
          color: #000;
      }
     
      .bottombar .social a:last-of-type:hover::before

      {
          color: initial;
      }
      .bottombar .contact .fa-whatsapp
      {
          font-size: 28px;
      }  
      
      
      .divBig
      {
          height: 100vh;
          width: 100vw;overflow-y: scroll;
          overflow-x: hidden;
      }
    .about
    {
        background: #fff;
        position: absolute;
        top: -200%;
        transition: all 0.5s ease-in-out;
    }
    .works
    {
        background: #fff;
        position: absolute;
        bottom: -200%;
        transition: all 0.5s ease-in-out;
    }





    .content
    {
        width: 80vw;    
        height: 75vh !important;
        overflow-x: hidden;
        overflow-y: scroll;

        margin: 21px auto;

    }
    .content::-webkit-scrollbar
    {
        display: none;
    }
    .title::after
    {
        content: '';
        position: relative;
        display: flex;
        width: 140px;
        height: 4px;
        background: #111;
        margin-top: 9px;
    }

    .para
    {
        width: 80%;
        font: 18px 'Montserrat',sans-serif;
    margin-top: 20px;
    }

.para>p

{
    margin: 30px 0;
}
    .para>p:first-of-type::first-letter
    {
        font-size: 35px;
        font-weight: 800;
        margin-right: 6px;
    }



.flexDiv
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

      .aboutContent .title
      {
          color: #fff;
          font: 5vh 'Poppins',sans-serif;
      } 
      .aboutContent .title::after
      {
          background-color: #fff;
      }
      .aboutContent  .para
      {
          color: #fff;
      }
      .aboutimg
      {
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .aboutimg img
      {
          width: 80%;
          height: auto;
      }

      .column {
        float: left;
        width: 33.33%;
        display: none; /* Hide all elements by default */
      }
      
      /* Clear floats after rows */ 
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
      
      /* Content */
      .imagecontent {
        background-color: white;
        padding: 10px;
      }
      .imagecontent img
      {
          width: 100% !important;
          height: 100% !important; 
      }
     
      
      /* Clear floats after rows */ 
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
      /* The "show" class is added to the filtered elements */
      .show {
        display: block;
      }
      
      /* Style the buttons */
      .btn {
        border: none;
        outline: none;
        padding: 12px 16px;
        background-color: white;
        cursor: pointer;
      }
      
      .btn:hover {
        background-color: #ddd;
      }
      
      .btn.active {
        background-color: rgb(19, 125, 187);
        color: white;
      }