*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.header
{
    max-width: 1840px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    margin: auto;
}
.header .left
{
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.header .left h2 a
{
    text-decoration: none;
    color: #009999;
}
.header .right ul li a .p2
{
     border-bottom: 3px solid orangered;
}
.header .right ul li a .p1:hover
{
   border-bottom: 3px solid aqua;
}
.header .right ul li a p:hover
{
    color:#009999;
}
.header .right ul li a .p2:hover
{
     border-bottom: 3px solid orangered;
}

.header .right ul li a .p3:hover
{
     border-bottom: 3px solid rgb(106, 212, 106);
}

.header .right ul li a .p4:hover
{
     border-bottom: 3px solid rgb(145, 15, 206);
}
.header .right
{
    width: 59%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    margin-right: 15px;
    
}
.header .right ul li a 
{
    text-decoration:none;
}
.header .right ul li a p{
    text-decoration: none;
    color: #666666;
    font-size: 20px;
    padding: 10px;
     
}

.right li {
    display: flex;
    width: 120px;
    height: 100%;
    text-decoration: none;
   
}
.header .right ul
{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
   
    

}


/* Copied  */
.header .right button {
   
    padding: .25rem .75rem;
    font-size: 1.25rem;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: box-shadow .15s ease-in-out;
    
}

/* Copied */
.header .left button 
{
    padding: .25rem .75rem;
    font-size: 1.25rem;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: box-shadow .15s ease-in-out;
    
}


.hero-video
{
    width: 100vw;
    height: 40px;
    height: auto;
    margin: auto;

}

.searchbr
{
    width: 100vw;
    height: 50px;
    
  
}
.search{
    display: flex;
    justify-content: center;
    align-items: center;
}

.search input
{
    width: 40%;
    height: 50px;
    padding-left: 20px;
}
.search button
{
    background-color:#009999 ;
    width: 100px;
    height: 50px;
    color: white;
    font-size: 20px;
}
.search button:hover
{
    background-color: green;
}


/* Main Section  */
.main
{
    max-width: 1840px;
    margin: auto;
}
.title-bar
{
    max-width: 97%;
    margin: auto;
    height: 100px;
    display: flex;
    justify-content: space-between;
    color: #009999;
    align-items: end;
}
.title-bar p
{
    margin-right: 50px;
}
.title-bar .title 
{
    margin-left: 30px;
}
.page-inp
{
    width: 40px;
    height: 25px;
    text-align: center;
    border-radius: 0;
    color: #009999;
    background-color: #f4f4f4;
    border:1px solid #cccccc;
}
.page-N
{
    margin-right:  30px;
    width: 500px;
    height: 40px;
    display: flex;
    justify-content: end;
}
.container .itmes .viewport
{
    display: flex;
    justify-content: space-between;
    color: rgb(185, 191, 196);
    margin-top: 20px;

}

.title
{
   margin-left: 15px;
}
.page
{
    margin-right: 20px;
}

.container
{
    width: 95%;
    margin: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.container .itmes
{
  margin: 5px;
  justify-content: center;
}
.item-png
{
    justify-content: center;
    max-height: 100%;
    min-height: 50%;
    min-width: 50%;
    max-width: 100%;
    height: auto;
    
}
button:hover
{
    cursor: pointer;
}

.bottom-bar 
{
    width: 100%;
    height: 80px;
}

.bottom-bar 
{
    display: flex;
    justify-content: space-between;
}


.bottom-bar .bottom-left
{
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bottom-bar .bottom-center
{
    width: 30%;
    height: 100%;
    
    
}
.bottom-bar .bottom-center .center 
{
    width: 60%;
    height: 80%;
    display: flex;
    justify-content: space-around;
}
.bottom-bar .bottom-right
{
    width: 25%;
    height: 100%;
     display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-bar .bottom-left .prev 
{
    width: 70%;
    height: 70%;
    border-radius: 10px;
    font-size: 20px;
    background-color: #009999;
    color: white;
}
.bottom-bar .bottom-right .next 
{
    width: 70%;
    height: 70%;
    border-radius: 10px;
    font-size: 20px;
    background-color: #009999;
    color: white;
}
.bottom-bar .bottom-right .next:hover
{
    background-color:#026868;
}

.bottom-bar .bottom-center .center-N
{
    width: 60px;
    height: 90%;
    margin: 5px;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
}
 #first-N 
{
    background-color: #009999;
    color: white;

}
 #N 
{
    background-color:#eeeeee;
    color: #999999;
    
}
#N:hover
{
    background-color: #009999;
    color: white;
}
a
{
    text-decoration: none;
}
.boot
{
    color: blue;
}

/* Footer Section  */

.footer
{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-top: 50px;
    width: 100vw;  
    background-color: #eeeeee;
}

.footer-nav
{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-top: 50px;
    max-width: 1840px;
    margin: auto;
    height: 350px;
    display: flex;
    justify-content: space-between;
}
p 
{
    color: #999999;
}
.footer .column-1
{
    width: 45vw;
    height: 100%;
}
.footer .column-1 h2
{
    color: #009999;
    margin-top: 30px;
    margin-left: 50px;
}
.footer .column-1 .about
{
    margin-top: 15px;
    margin-left: 50px;
    font-size: 18px;
    line-height: 30px;
    
}
.footer .column-1 .copy
{
    margin-top: 80px;
    margin-left: 50px;
    font-size: 18px;
}

.footer .column-2
{
    width: 20vw;
    height: 100%;

}
.footer .column-2 h2
{
    color: #009999;
    margin: 40px;
}
ul li
{
    list-style: none;
}
.footer .column-2 ul li
{ 
     text-decoration: none;
     font-size:18px;
     margin-left: 20px;
     padding: 10px;
}
.column-2 a 
{
    color: #999999;
}
.footer .column-3
{
    width: 27vw;
    height: 100%;
    
}
.footer .column-3 .media ul li a i
{
    width: 50px;
    height: 35px;
    color:#999999;
    text-align: center;
    padding: 9px;
    background-color:#ffffff ;
    border-radius: 5px;
}
.footer .column-3 .media ul li a i:hover
{
    background-color: #009999;
    color: #ffffff;
    border-radius: 5px;
}
.media ul {
  margin-top: 35px;
  list-style: none;
  display: flex; 
  gap: 10px;   
      
}
.footer .privacy a
{
    padding: 10px;
}
.footer .privacy 
{
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    color: #887f7f;
    font-size: 18px;
    margin-left: 100px;
}
.footer .privacy a:hover
{
    color: #009999;
}
.footer a:hover
{
    color: #009999;
}
.footer .column-3 .media .privacy a
{
    color: #999999;;
}
.footer .column-3 .media  .author
{
    margin-top: 70px;
    margin-left: 100px;
    font-size: 18px;
}