*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: serif;
}
.header
{
    max-width: 1840px;
    height: 80px;
    display: flex;
    margin: auto;
    justify-content: space-between;
}
.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 .p1
{
     border-bottom: 3px solid #3399cc;
}
.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;
    
}
.header-nav
{
    max-width: 1840px;
    margin: auto;
}

.hero
{
    width: 100vw;
    height:200px;
    margin: auto;
    background-image: url(../imges/hero.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100vw;
    background-origin: padding-box;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search-br
{
    width: 50%;
    height: 50px;
  
}
.search{
    display: flex;
    justify-content: center;
    align-items: center;
}

.search input
{
    width: 600px;
    height: 50px;
    padding-left: 20px;
    border: 1px solid #009999;
    box-shadow: #009999 1px 1px;
}
.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;
}
.title-bar
{
    max-width: 1840px;
    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
{
    max-width: 1850px;
    margin: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: auto;
   
}

.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;
}
.main
{
    max-width: 1840px;
    margin: auto;
    
}

/* 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: 40px;
    margin-left: 50px;
    font-size: 18px;
    
}

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

/* This part copied from chatgpt */
.container{
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    padding: 20px;
}
.itmes img{
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 992px){
    .container{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px){
    .container{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px){
    .container{
        grid-template-columns: 1fr;
    }
}

/* XS */
/* @media screen  and (max-width:576px){
    .col-xs-1 {width: 8.33%;}
    .col-xs-2 {width: 16.66%;}
    .col-xs-3 {width: 25%;}
    .col-xs-4 {width: 33.33%;}
    .col-xs-5 {width: 41.66%;}
    .col-xs-6 {width: 50%;}
    .col-xs-7 {width: 58.33%;}
    .col-xs-8 {width: 66.66%;}
    .col-xs-9 {width: 75%;}
    .col-xs-10 {width: 81.33%;}
    .col-xs-11 {width: 91.66%;}
    .col-xs-12 {width: 100%;}
} */

/* SM */
/* @media screen  and (min-width:576px){
    .col-sm-1 {width: 8.33%;}
    .col-sm-2 {width: 16.66%;}
    .col-sm-3 {width: 25%;}
    .col-sm-4 {width: 33.33%;}
    .col-sm-5 {width: 41.66%;}
    .col-sm-6 {width: 50%;}
    .col-sm-7 {width: 58.33%;}
    .col-sm-8 {width: 66.66%;}
    .col-sm-9 {width: 75%;}
    .col-sm-10 {width: 81.33%;}
    .col-sm-11 {width: 91.66%;}
    .col-sm-12 {width: 100%;}
} */
/* MD  */
/* @media screen  and (min-width:768px){
    .col-md-1 {width: 8.33%;}
    .col-md-2 {width: 16.66%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.33%;}
    .col-md-5 {width: 41.66%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.33%;}
    .col-md-8 {width: 66.66%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 81.33%;}
    .col-md-11 {width: 91.66%;}
    .col-md-12 {width: 100%;}
} */
/* lg  */

/* @media screen  and (min-width:992px){
    .col-lg-1 {width: 8.33%;}
    .col-lg-2 {width: 16.66%;}
    .col-lg-3 {width: 25%;}
    .col-lg-4 {width: 33.33%;}
    .col-lg-5 {width: 41.66%;}
    .col-lg-6 {width: 50%;}
    .col-lg-7 {width: 58.33%;}
    .col-lg-8 {width: 66.66%;}
    .col-lg-9 {width: 75%;}
    .col-lg-10 {width: 81.33%;}
    .col-lg-11 {width: 91.66%;}
    .col-lg-12 {width: 100%;}
} */
/* xl  */
/* @media screen  and (min-width:1200px){
    .col-xl-1 {width: 8.33%;}
    .col-xl-2 {width: 16.66%;}
    .col-xl-3 {width: 25%;}
    .col-xl-4 {width: 33.33%;}
    .col-xl-5 {width: 41.66%;}
    .col-xl-6 {width: 50%;}
    .col-xl-7 {width: 58.33%;}
    .col-xl-8 {width: 66.66%;}
    .col-xl-9 {width: 75%;}
    .col-xl-10 {width: 81.33%;}
    .col-xl-11 {width: 91.66%;}
    .col-xl-12 {width: 100%;}
} */
/* xxl  */
/* @media screen  and (min-width:1400px){
    .col-xxl-1 {width: 8.33%;}
    .col-xxl-2 {width: 16.66%;}
    .col-xxl-3 {width: 25%;}
    .col-xxl-4 {width: 33.33%;}
    .col-xxl-5 {width: 41.66%;}
    .col-xxl-6 {width: 50%;}
    .col-xxl-7 {width: 58.33%;}
    .col-xxl-8 {width: 66.66%;}
    .col-xxl-9 {width: 75%;}
    .col-xxl-10 {width: 81.33%;}
    .col-xxl-11 {width: 91.66%;}
    .col-xxl-12 {width: 100%;}
} */


/* ======================================== */
/* download section  */
.main-section
{
    max-width: 1850px;
    height: auto;
    display: flex;
    justify-content:space-around;
    margin: 80px auto;
}
.photo-title
{
    width: 1200px;
    height: 700px;
}

img 
{
     width: 100%;
     height: 700px;

}
.description
{
    width: 500px;
    height: 700px;
    margin: auto;
    background-color: #eeeeee;
    border-radius: 5px;
    p
    {
        padding: 5px;
    }
}
.description .paragraph
{
    padding: 20px;
    width: 380px;
    text-align: center;
    text-align: justify;
    margin: auto;
}
.description button
{
    width: 300px;
    height: 60px;
    margin-top: 50px;
    margin-left: 20px;
    padding: 10px;
    background-color: #009999;
    color: white;
    font-size: 24px;
    font-weight: 700;
    border-radius: 5px;
}
.description button:hover
{
    background-color: #026868;
}
.info
{
    display: flex;
    gap: 30px;
    margin:20px auto;
}
.info p
{
    color: #666666;
}
v 
{
    color: #009999;
}
p{
    font-size: 20px;
    line-height: 25px;
}
.tag
{
    display: flex;
    flex-flow: wrap;
}
.tag a
{
    margin: 5px;
}
.paragraph a p
{
    color: #009999;
}
.paragraph a p:hover 
{
    color: #666666;
}