@font-face {
    font-family: head;
    src: url(../fonts/Yeager-Regular.otf);
    }
    
    @font-face {
    font-family: para;
    src: url(../fonts/paragraph.woff2);
    }
    

.container2 {
     width: 100vw;
     display: flex;
     /* align-items: center; */
     justify-content: space-between;
     padding: 100px 50px;
 }
 .sidebar {
     width: 25%;
     border: 1px solid #ffffff;
     border-radius: 3px;
     padding: 15px;
     height: 90vh;
     box-shadow: 0px 0px 3px gray;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
 .fa-circle {
     color: orangered;
 }
 .searchBar {
     width: 100%;
     background-color: #ffffff;
     border-radius: 3px;
     padding: 9px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 .sideabout .sideaboutimage{
    width: 100%;
 }
 .sideaboutimage img{
    width: 100%;
 }
 .sideabouttext{
    font-size: 25px;
    color: rgb(55, 55, 55);
    text-align: center;
    font-weight: 600;
 }
 .sideabouttext a{
    text-decoration: none;
    color: orangered;
    font-weight: 300;
 }
 .sideabouttext a:hover{
    letter-spacing: 3px;
    transition: all 250ms ease-in-out;
 }
 input {
     border: none;
     outline: none;
     background: none;
     font-size: 25px;
 }
 .glass:hover {
     color: orangered;
     cursor: pointer;
 }
 .social-icons {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .fa-brands {
     font-size: 25px;
     margin: 0 10px;
     color: #333;
     cursor: pointer;
 }
 .fa-brands:hover {
     color: orangered;
 }
 .data {
     width: 73%;
     border-radius: 3px;
     height: auto;
     /* overflow-y: auto; */
 }
 .top {
     height: 60px;
     border-radius: 3px;
     background-color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 15px;
 }
 .top p{
    font-weight: 600;
    font-size: 25px;
    letter-spacing: 2px;
    word-spacing: 5px;
    font-family: para;
 }
 .header {
     width: 100%;
     height: 200px;
     border-radius: 3px;
     background-color: #333;
     margin: 3vh 0px;
     padding: 15px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
 .header:hover {
     background-color: orangered;
     cursor: pointer;
 }
 .header .heading {
     font-size: 40px;
     font-weight: bold;
     color: white;
     text-transform: uppercase;
 }
 .header .abouth{
   color: white;
   font-size: 25px;
   text-transform: uppercase;
   text-align: center;
   font-family: para;
 }
 #root {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 20px;
 }
 .box {
     margin: 1px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     border: 1px solid #333;
     background-color: #ffffff;
     border-radius: 5px;
     padding: 15px;
 }
 .img-box {
     width: 100%;
     height: 176px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .images {
     max-height: 90%;
     max-width: 90%;
     object-fit: cover;
     object-position: center;
 }
 .bottom {
     margin-top: 20px;
     width: 100%;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     height: 110px;
     text-transform: uppercase;
 }
 .nameofp{
    font-weight: 600;
    letter-spacing: 2px;
    word-spacing: 5px;
    font-family: para;
 }
 h2 {
     font-size: 20px;
     color: orangered;
 }
 .getknowaboutit {
     width: 100%;
     position: relative;
     border: none;
     border-radius: 5px;
     background-color: #333;
     padding: 7px 25px;
     cursor: pointer;
     color: white;
     text-transform: uppercase;
 }
 .getknowaboutit:hover {
     background-color: orangered;
 }
 ::-webkit-scrollbar
 {
      display: none;
 }

 @media screen and (min-width: 300px) and (max-width:500px){
    .container2{
        width: 100vw !important;
        display: flex;
        margin: auto;
        flex-direction: column;
    }
    .sidebar{
        margin-left: -50px;
        width: 100vw !important;
        height: 150px;
    }
    .sideabout{
        display: none;
    }
    .data{
        width: 100vw;
        margin-left: -50px !important;
        margin: auto;
        display: flex;
        flex-direction: column;
    }
    .top{
        display: none;
    }
    .header{
        display: flex;
        flex-direction: column;
    }
    .heading{
        font-size: 30px !important;
    }
    .abouth{
        font-size: 18px !important;
        padding-bottom: 50px;
    }
    .body{
        width: 100vw;
    }
    #root{
        width: 90%;
        margin: auto;
        display: grid !important;
        grid-template-columns: repeat(1, 1fr) !important;
    }

 }