@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');
* {
    font-family: 'Lora', sans-serif;
    overflow-x: none;
    text-decoration: none;
}
.body{
    background: none;
    /* min-height: 62.3vh; */
}
*{
    margin: 0px;
padding: 0px;    
}

.nav-nav{
    position: relative;
}
.head{
    width: 90%;
    margin: auto;
    padding: 0px 5px;
    padding-top: 30px;
    padding-bottom: 10px;
}
.head h5{
    color: #464646;
    font-size: 16px;
}
.foot{
    position: absolute;
    bottom: 0%;
    width: 100%;
}
.mat-expansion-panel{
    box-shadow: 0px 0px 8px rgba(22, 22, 22, 0.25);
    width: 90%;
    margin: 30px auto;

}
.mat-expansion-panel-header{
    background-color: #888888 !important;
}
.mat-expansion-panel-body{
    padding: 16px 24px 16px !important;
}

.mat-expansion-panel-header-title, .mat-expansion-panel-header-description {

font-weight: 600;
}

.mat-expansion-panel-header{
cursor: pointer;
/* width: 200px; */
height: auto;
padding: 2vh;
}

body {
    overflow-x: hidden;
   }
   
   .accordion {
    padding: 2rem 2rem;
   }
   
   summary {
    display: block;
    margin: 0 auto;
    cursor: pointer;
    padding: 1rem 1rem;
    background: #888888;
    border-radius: 3px;
   }
   
   details {
    display: block;
    margin: 0 auto;
    width: 100%;
    margin-bottom: 1rem;
   }
   
   details p {
    margin: 1rem 20px;
    text-align: justify;
    color: #464646;
    font-style: normal;
line-height: 30px;
   }
   details h3 {
    color: white;
   }
   
   summary > * {
    display: inline;
   }
    
   .navbar input[type="checkbox"],
   .navbar .hamburger-lines{
       display: none;
   }
   
   .container{
       max-width: 1200px;
       margin: auto;
   }
   
   .navbar{
       box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
       width: 100%;
       background: #fff;
       color: #000;
       z-index: 100;
       border-top: 10px #E98A46 solid;
   }
   
   .navbar-container{
       display: flex;
       justify-content: space-between;
       height: 64px;
       align-items: center;
   }
   
   .menu-items{
       order: 2;
       display: flex;
   }
   .logo{
       order: 1;
       font-size: 2.3rem;
   }
   .logo2{
       order: 1;
       font-size: 2.3rem;
   }
   
   .menu-items li{
       list-style: none;
   margin-left: 0.8rem;
   font-size: 1.3rem;
   margin-right: 0.8rem;
   padding: 7px 7px;
   border-radius: 20px;
   }
   .menu-items li:hover{
       background-color: #F1F1F1;
       color: black !important;
   }
   
   .navbar a{
       color: #444;
       font-size: 16px;
       text-decoration: none;
       font-weight: 500;
       transition: color 0.3s ease-in-out;
       min-width: max-content;
   }
   
   .navbar a:hover{
       color: black;
   }
   
   @media (max-width: 768px){
       .navbar{
           opacity: 0.95;
       }
   
       .navbar-container input[type="checkbox"],
       .navbar-container .hamburger-lines{
           display: block;
       }
   
       .navbar-container{
           display: block;
           position: relative;
           height: 64px;
       }
   
       .navbar-container input[type="checkbox"]{
           position: absolute;
           display: block;
           height: 32px;
           width: 30px;
           top: 20px;
           right: 5px;
           z-index: 5;
           opacity: 0;
           cursor: pointer;
       }
   
       .navbar-container .hamburger-lines{
           display: block;
           height: 28px;
           width: 35px;
           position: absolute;
           top: 20px;
           right: 5px;
           z-index: 2;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
       }
   
       .navbar-container .hamburger-lines .line{
           display: block;
           height: 4px;
           width: 100%;
           border-radius: 10px;
           background: #333;
       }
       
       .navbar-container .hamburger-lines .line1{
           transform-origin: 0% 0%;
           transition: transform 0.3s ease-in-out;
       }
   
       .navbar-container .hamburger-lines .line2{
           transition: transform 0.2s ease-in-out;
       }
   
       .navbar-container .hamburger-lines .line3{
           transform-origin: 0% 100%;
           transition: transform 0.3s ease-in-out;
       }
   
       .navbar .menu-items{
           padding-top: 100px;
           background: #fff;
           height: 100vh;
           max-width: 300px;
           transform: translate(-150%);
           display: flex;
           flex-direction: column;
           margin-left: -40px;
           padding-left: 40px;
           transition: transform 0.5s ease-in-out;
           box-shadow:  5px 0px 10px 0px #aaa;
           overflow: scroll;
       }
   
       .navbar .menu-items li{
           margin-bottom: 1.8rem;
           font-size: 1.1rem;
           font-weight: 500;
       }
   
       .logo{
           position: absolute;
           top: 10px;
           font-size: 2.5rem;
       }
       .logo2{
           font-size: 2.5rem;
       }
   
       .navbar-container input[type="checkbox"]:checked ~ .menu-items{
           transform: translateX(0);
       }
   
       .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
           transform: rotate(45deg);
       }
   
       .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
           transform: scaleY(0);
       }
   
       .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
           transform: rotate(-45deg);
       }
   
   }
   
   @media (max-width: 500px){
       .navbar-container input[type="checkbox"]:checked ~ .logo{
           display: none;
       }
       .navbar{
           width: 100vw;
       }
   }

   *{
    margin: 0px;
    padding: 0px;
}
.footer{
    min-height: 200px;
    width: 100%;
    background: #3D3D3D;
    display: block;
    transform: translateY(20px);
}
button{
    padding: 10px 40px;
    color: #464646;
    background: #E2E2E2;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    border-color: none;
    cursor: pointer;
}
.footer2{
    display: none;
}
@media only screen and (max-width: 600px) {
    .footer2{
        display: block;
    }
    .footer{
        display: none;
    }
    .footer2{
        min-height:200px;
        width: 100%;
        background: #3D3D3D;
        display: block;
        transform: translateY(20px);
    }
    button{
        margin: 20px 10px;
        width: 80%;
    }
  }